将参数从SwitchNavigator中的屏幕传递到TabNavigator中的另一个

时间:2019-03-03 20:00:04

标签: reactjs react-native react-navigation

在将参数从switchNavigator的屏幕传递到TabNavigator的另一个屏幕时,我一直遇到一些问题

setvalue(response){
    this.setState({profile :response})
    
    console.warn(this.state.profile);
    this.state.navigate('Navigators',{profile: profile})
   
  }

配置文件包含配置文件详细信息的JSON对象。导航将日期发送到“导航器”屏幕,该屏幕只是一个TabNavigator

const Navigators = createAppContainer(Userstack);

export default RootStack = createSwitchNavigator(
  {
    Home: {
      screen: Login
    },
    Register: {
      screen: Registration
    },
   Navigators: {
      screen: Navigators
    },
  },
  {
    initialRouteName: 'Home'
  }

);

如何创建TabNavigator。

export default Userstack = createBottomTabNavigator(
  {
    User: {
      screen: Profile
    },
    Discovery: {
      screen: DiscoveryNavigator
    },
  },
  {
      defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ tintColor }) => {
          const { routeName } = navigation.state;
          let IconComponent = Ionicons;
          let iconName;
          if (routeName === 'User') {
            iconName = `md-contact`;
            
            IconComponent = HomeIconWithBadge;
          } else if (routeName === 'Discovery') {
            iconName = `md-search`;
          }
          return <IconComponent name={iconName} size={27} color={tintColor} />;
        },
      }),
      tabBarOptions: {
        activeTintColor: '#00FA9A',
        inactiveTintColor: 'black',
      },
    }

);

我希望访问个人资料信息的屏幕是

export default class Profile extends Component {
  constructor(props){
    super(props);
    console.warn(props)
    this.State = {
      profile: this.props.navigation.params.profile
    }
    
  }

1 个答案:

答案 0 :(得分:0)

您尝试过this.props.navigation.state.params吗?

根据参考:https://reactnavigation.org/docs/params.html

您还可以使用this.props.navigation.state.params直接访问params对象。如果未提供任何参数,则此字段可能为null,因此使用getParam通常更容易,因此您不必处理这种情况。