将导航传递到createStackNavigator和createBottomTabNavigator以进行路由屏幕自定义

时间:2019-05-31 06:11:12

标签: react-native react-navigation

这是App.js中带有响应导航3.9的屏幕路由结构。有一个InitialNavigator屏幕,其中包含启动屏幕和App屏幕。在“应用程序”屏幕中,有一个bottomTabNavigator,EventUser堆栈。

const ChatWithSocket =(props)=>()

//create the navigator
const EventStack = createStackNavigator(
  {
    Event:  Event,
    NewEvent: NewEvent,
    Chat: {
      screen: ChatWithSocket,

    },
    Signup: Signup,
    Verif1: Verif1,

  },  {
    initialRouteName: 'Verif1',
  } 
);
const UserStack = createStackNavigator(
  {
    NewUser: NewUser,
    EditUser: EditUser,    
  }, {
      initialRouteName: "NewUser",
  }

);


const bottomTabNav = createBottomTabNavigator(
    {
      Event: {screen: EventStack},
      User: {screen: UserStack},
    },
    {
        defaultNavigationOptions: ({ navigation }) => ({
          tabBarIcon: ({ focused, tintColor }) => {
           const { routeName } = navigation.state;
           const data = navigation.dangerouslyGetParent().getParam('params');
            let iconName;
            if (routeName === 'Event') {
              iconName = `ios-information-circle${focused ? '' : '-outline'}`;
            } else if (routeName === 'User') {
              iconName = `ios-options${focused ? '' : '-outline'}`;
            }

            return <Text>Hello the world!</Text>
          },
        }),
        tabBarOptions: {
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        },
      }
    );

const InitialNavigator = createSwitchNavigator({
  Splash: SplashScreen,
  App: bottomTabNav,
});

需要使用从初始屏幕传递的navigation中的数据来自定义路线屏幕:

const params = navigation.dangerouslyGetParent().getParam('params')

如何传递navigation作为createStackNavigatorcreateBottomTabNavigator的变量以自定义路由?像这样:

 createStackNavigator(({navigation}) => {
  //customize route screen based on value in navigation
 })

带有示例的示例将不胜感激。

0 个答案:

没有答案