Question

我正在尝试通过createBottomTabNavigator将某些属性从一个屏幕传递到另一个屏幕。我正在使用反应导航。

const AppNavigator = createBottomTabNavigator({
    Home: {screen: HomeScreen}, 
    Map: {screen: MapScreen}
}, {
    initialRouterName: 'Home',
});

在主屏幕上，我在this.props.navigation.setParams中用componentDidMount设置了道具，如果我在同一屏幕上检查了this.props.navigation，它的显示是否正确。

componentDidMount() {
    navigator.geolocation.getCurrentPosition(
        position => {
            const location = JSON.stringify(position);
            this.props.navigation.setParams({position: location});
        },
        error => {
            Alert.alert(error.message);
        }, 
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
}

我需要将此道具访问MapScreen之类的其他屏幕，但在其他屏幕上却显示为空。

我不确定这是否正确。我知道我可以使用this.props.navigation.navigate发送邮件，但是如您所见，我正在使用 tabNavigator ，所以不确定从哪里开始。

Answer 1

我强烈建议您使用redux而不是传递参数。 Redux旨在将属性从一个屏幕共享到另一个屏幕。

Answer 2

在Home Component中的用法如下，

this.props.navigation.navigate('Map',
      {
        name: 'Anand',
        mob : '90090'
      }
    );

并且在“地图组件”中，您可以像这样使用名称。

this.props.navigation.state.params.name

在地图组件中，您可以像这样使用 mob 。

this.props.navigation.state.params.mob

使用createBottomTabNavigator

2 个答案: