时间戳

首页 > 解决方案 > 无法通过导航发送参数导航

react-native - 无法通过导航发送参数导航

问题描述

我想通过路由器将参数名称从登录屏幕发送到主屏幕，但未定义数据对象

TypeError：未定义不是对象（评估'navigation.state.params.name'

登录屏幕

<TouchableOpacity
  style={styles.buttonContainer}
  onPress={() => this.props.navigation.navigate('Home', { name: 'Erry' })}>
  <Text style={styles.buttonText}>MASUK</Text>
</TouchableOpacity>

我的路由器

export const LoginStack = SwitchNavigator({
  Login: {
    screen: Login,
  },
  Home: {
    screen: HomeStack
  }
}, {
    headerMode: 'none',
    navigationOptions: {
      headerVisible: false,
    }
  });

export const HomeStack = StackNavigator({
  Home: {
    screen: Home
  }
});

主屏幕

static navigationOptions = ({navigation}) => ({
      title: `${navigation.state.params.name}`,
      headerStyle : {
          backgroundColor: '#f39c12',
      },
      headerTitleStyle :{
          color: '#353b48',
      },
  });

任何想法 ？

标签： react-nativereact-navigation

解决方案

SwitchNavigator 的目的是一次只显示一个屏幕。默认情况下，它不处理返回操作，并且在您切换离开时将路由重置为默认状态。

你最好不要用SwitchNavigator，你可以看看正确的例子。

你最好判断是否params为空：

const params = navigation.state.params || {};
const title = params.name || 'default title';

推荐阅读