反应导航(v2)如何将道具传递给我的TabNavigator并将这些道具发送到屏幕

时间:2018-06-04 14:45:06

标签: react-native react-native-android react-navigation

我是React-Native和React的新手。我正在尝试使用React Navigation(v2)

在我的移动应用上实现简单的标签导航

基本上有两个文件:

Router.js

// imports...

const Tabs = TabNavigator(
{
  Logs: { 
      screen: Logs,
      // here I would like to recieve the jwt and pass it as a param to the logs screen
     },
  NewRide: { 
      screen: NewRide
     }
},
 {navigationOptions: ...}
} 
export default tabs;

LoggedIn.js

export default class LoggedIn extends Component {
constructor(props) {
    super(props);
}

render() {
        return (
            <View>
                <Tabs jwt={this.props.jwt} /> // here I pass the jwt as a prop
            </View>
        );
}

我要做的是将位于LoggedIn.js的LoggedIn类中的名为jwt的道具传递给位于Router.js中的Tabs。从Tabs调用我最终希望将收到的Jwt作为prop发送到Logs屏幕。

我不知道如何在Router.js文件中接收Jwt并将其传递给日志屏幕。任何有关这方面的帮助都将受到极大的关注,因为我已经坚持了两天。亲切的问候马特。

1 个答案:

答案 0 :(得分:2)

您可以将全局参数传递到导航,该导航可在该导航的每个屏幕中使用。

  

screenProps - 将额外选项传递给子屏幕

<强>示例

const SomeTab = TabNavigator({
  // config
});

<SomeTab
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>