如何使用嵌套导航将数据从屏幕移动到屏幕?

时间:2021-07-08 22:02:56

标签: typescript react-native

我已经知道有一些关于此的问题,但没有一个有帮助。就我而言,我有几个嵌套导航,我认为这可能是问题所在。我在尝试获取我的数据时收到“未定义不是对象(评估 this.props.navigation.state.params)”错误。我有这个 const { navigate } = this.props.navigation; 是我的渲染并使用 navigate("AddressForm", {p1:this.state.address}) 发送数据。当我尝试使用 this.props.navigation.state.params.p1 接收它时。根据我从另一个人的理解,不知何故我的导航参数在不应该时是未定义的。下面是我的两个导航。主导航:

const { Navigator, Screen } = createBottomTabNavigator();

const PersonIcon = (props) => (
  <Icon {...props} name='person-outline'/>
);

const MapIcon = (props) => (
  <Icon {...props} name='map-outline'/>
);

const LeadsIcon = (props) => (
  <Icon {...props} name='clipboard-outline'/>
);

const SettingsIcon = (props) => (
  <Icon {...props} name='settings-outline'/>
);

const BottomTabBar = ({ navigation, state }) => (
  <BottomNavigation
    selectedIndex={state.index}
    onSelect={index => navigation.navigate(state.routeNames[index])}
    style={styles.bottomNavigation}>
    <BottomNavigationTab title='My Stats' icon={PersonIcon}/>
    <BottomNavigationTab title='Map' icon={MapIcon} />
    <BottomNavigationTab title='My Leads' icon={LeadsIcon}/>
    <BottomNavigationTab title='Settings' icon={SettingsIcon}/>

  </BottomNavigation>
);

const TabNavigator = () => (
  <Navigator tabBar={props => <BottomTabBar {...props} />} 
  >

    <Screen name='My Stats' component={StatScreenNav}/>
    <Screen name='Map' component={MapNav} />
    <Screen name='My Leads' component={MyLeads}/>
    <Screen name='Settings' component={Settings}/>

  </Navigator>
);

第二次导航:

const Stack = createStackNavigator();

const MapScreenNav = (props) => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }} >
      <Stack.Screen name="MapComponent" component={MapComponent} />
      <Stack.Screen name="AddressForm" component={AddressForm} />
    </Stack.Navigator>
  );
};

export default MapScreenNav;

0 个答案:

没有答案