javascript - 参数未传递且导航器在 createStackNavigator 中不可用 - React Navigation

Question

我在我的应用程序中使用React Navigation。我在标题中使用 createBottomTabNavigator 创建了 createStackNavigator 我试图访问我从屏幕传递的参数，但这些参数不可用。我还希望当有人单击“标题”按钮然后转到新屏幕时，但问题是“navigation.navigator()”功能在标题按钮中不可用。

这是我的 Nav.js 的样子:

import React from 'react';
import {View, Text, Button} from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import Screen3 from './Screen3';

const bottomTab = createBottomTabNavigator(
  {
    openOrder: Screen1,
    closeOrder: Screen2
  }
);

const mainNav = createStackNavigator({
  order: {
    screen: bottomTab,
    navigationOptions: ({navigation}) => ({
      headerRight: (
        <View>
          <Button title="Map" onPress={() => console.log(navigation)} />
        </View>
      )
    })
  },
  map: Screen3
});

export default createAppContainer(mainNav);

Screen1.js

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

const Screen1 = props => {
  useEffect(() => {
    props.navigation.setParams({
      title: 'Some Content',
      map: mapit,
    });
  }, []);

  const mapit = () => {
    console.log('Map it function');
  };

  return (
    <View>
      <Text>Screen 1</Text>
    </View>
  );
};

export default Screen1;

Screen2.js

import React from 'react';
import {View, Text} from 'react-native';

const Screen2 = () => {
  return(
    <View>
      <Text>Screen 2</Text>
    </View>
  );
}

export default Screen2;

Screen3.js

import React from 'react';
import {View, Text} from 'react-native';

const Screen3 = () => {
  return(
    <View>
      <Text>Screen 3</Text>
    </View>
  );
}

export default Screen3;

这里是Snack

Answer 1

您可以通过创建一个具有导航功能的按钮来解决这个问题。

withNavigation 是一个高阶组件，它将 navigation 属性传递到包装组件中。当您无法将 navigation 属性直接传递到组件中，或者不想在深度嵌套子组件的情况下传递它时，它非常有用。

示例

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class MyMoveButton extends React.Component {
  render() {
    return (
      <Button
        title="map"
        onPress={() => {
          this.props.navigation.navigate("map");
        }}
      />
    );
  }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyMoveButton);

使用

import MyMoveButton from "path for MyMoveButton"
...

headerRight: (
        <View>
          <MyMoveButton />
        </View>
      )