React Navigation - 在屏幕之间导航答案

【问题标题】：React Navigation - navigating between screensReact Navigation - 在屏幕之间导航
【发布时间】：2018-02-20 05:40:01
【问题描述】：

我正在尝试使用 React Navigation 在 React Native 中的屏幕之间导航。

目前，我有以下内容。请注意，EmployeeStack 嵌套在 inside 的 RootStack 中。

RootStack.js：

import LoginForm from '../components/LoginForm';
import EmployeeStack from './EmployeeStack';
import { StackNavigator } from 'react-navigation';

const routes = {
    Home: {screen: LoginForm},
    EmployeeList: {screen: EmployeeStack}
};

const options = {
    initialRouteName: 'Home'
};

const RootStack = StackNavigator(routes, options);

export default RootStack;

EmployeeStack.js：

import EmployeeList from '../components/EmployeeList';
import AnotherScreen from '../components/AnotherScreen';
import { StackNavigator } from 'react-navigation';

const routes = {
    EmployeeList: {screen: EmployeeList},
    AnotherScreen: {screen: AnotherScreen},
};

const options = {
    initialRouteName: 'EmployeeList'
};

const EmployeeStack = StackNavigator(routes, options);

export default EmployeeStack;

在 EmployeeList.js 中，我有一个按钮：

<Button 
    onPress={() => this.props.navigation.navigate('AnotherScreen')}
    title="Go123"
    color="#841584"
/>

此按钮在按下时不导航到 AnotherScreen。不过有趣的是，如果我将导航参数更改为“EmployeeList”或“Home”，它会正确导航到这些屏幕。

如何导航到另一个屏幕？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

为了在登录屏幕之间导航 -> 主屏幕，您需要定义单独的导航。像其他导航一样使用主导航

import HomeScreen from "../screens/user/Home";
import LoginScreen from "../screens/Login";
import ContactScreen from "../screens/Contact";
import LogoutScreen from "../screens/Logout";



........
const LoginStack = StackNavigator({
  loginScreen: { screen: LoginScreen },
 // signupScreen: { screen: SignupScreen },
     // forgottenPasswordScreen: { screen: ForgottenPasswordScreen, navigationOptions: { title: 'Forgot Password' } }
    }, {
      headerMode: 'none',
      navigationOptions: {        
        headerVisible: false,
        gesturesEnabled: false,
      }
 })

const HomeNavigation = StackNavigator({
  HomeStack: { screen: HomeStack }
}, {
  headerMode: 'float',
  navigationOptions: ({navigation}) => ({
    gesturesEnabled: false,
    headerStyle: {backgroundColor: '#29B1FC'},
    headerTintColor: '#ffffff',  
  }),
})
const HomeStack = DrawerNavigator({
  HomeScreen: { screen: HomeScreen },
  ContactScreen: { screen: ContactScreen },
  LogoutScreen: { screen: LogoutScreen },
  },  
  {
      contentOptions: {
        activeTintColor: 'black',
        activeBackgroundColor : 'transparent',
        inactiveTintColor : 'black',
        itemsContainerStyle: {
          marginVertical: 0,
        },
        iconContainerStyle: {
          opacity: 1,
        },
        itemStyle :{
          height : 50,
        }
      },
      }

 )


const PrimaryNav = StackNavigator({
  loginStack: { screen: LoginStack },
  HomeStack: { screen: HomeNavigation },
}, {
  // Default config for all screens
  headerMode: 'none',
  title: 'Main',  
  initialRouteName: 'loginStack'
})
export default PrimaryNav
........

你的按钮按下将像这样工作

<Button 
onPress={() => this.props.navigation.navigate('HomeStack')} 
//HomeStack = navigation of PrimaryNav 
    title="Go123"
    color="#841584"
/>

【讨论】：