如何从堆栈导航器导航到选项卡导航器

时间:2019-08-20 11:57:01

标签: react-native react-native-android react-navigation react-native-ios

登录后,存在一个TabNav,从第一个选项卡导航到第二个选项卡,然后导航到StackNav中定义的屏幕,现在我想导航至TabNav的第三个选项卡。如何实现呢?我想从未发生的服务器中“获取”数据,因为未调用“ componentDidMount”。

当我不得不从TabNav导航到StackNav时,我遇到了同样的问题,但是我通过在StackNav中定义TabNav解决了它。

这是我的App.js

export class NavigationDrawerStructure extends Component {
  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
      </View>
    );
  }
}

const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: Screen1,
  },
});

const Screen2_StackNavigator = createStackNavigator({
  Second: {
    screen: Screen2,
  },
});

const Screen3_StackNavigator = createStackNavigator({
  Third: {
    screen: Screen3,
  },
});

const TabNavigator = createMaterialTopTabNavigator(
{
  Upcoming: { screen: UpcomingScreen },
  Accepted: { screen: AcceptedScreen },
  Ongoing: { screen: OngoingScreen },
  Completed: { screen: CompletedScreen },
},
);

const tabs = createStackNavigator({
 Root: {
 screen: TabNavigator,
 navigationOptions: () => ({
  title: `Welcome, John Doe`,
 }),
},
});

const AppNavigator = createStackNavigator(
{
  login: 
    {
      screen: Login,
      navigationOptions: ({ navigation }) => ({
        headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
        headerStyle: {
          backgroundColor: '#fff',
        },
        headerTintColor: '#fff',
      }),
    },

  login: Login,
  tab: tabs,
  acceptedTrip: AcceptedTrip,
  startTrip: StartTrip,

  upload: Upload,
  geoLoc: GeoLoc,
  ongoingScreen: OngoingScreen
},
{
 headerMode: 'none',
 navigationOptions: {
  headerVisible: false,
}
}
)

const DrawerNavigatorExample = createDrawerNavigator(
{
  Screen1: {
  screen: AppNavigator,
  navigationOptions: {
    drawerLabel: 'Login',
  },
},

Screen2: {
  screen: Screen2_StackNavigator,
  navigationOptions: {
    drawerLabel: 'Demo Screen 2',
  },
},

Screen3: {
  screen: Screen3_StackNavigator,
  navigationOptions: {
    drawerLabel: 'Demo Screen 3',
  },
},
Screen4: {
  screen: FirstActivity_StackNavigator,
  navigationOptions: {
    drawerLabel: 'Demo Screen 1',
  },
},
},
{
 initialRouteName: "Screen1"
}
);

const MyApp = createAppContainer(DrawerNavigatorExample);

class App extends React.Component{
render(){
  return <MyApp/>
}
}

export default App

componentDidMount没有被调用。

0 个答案:

没有答案