反应导航 - 在屏幕之间导航

Question

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

目前，我有以下内容。请注意，EmployeeStack嵌套在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”，它会正确导航到这些屏幕。

如何导航到AnotherScreen？

Answer 1

为了在登录屏幕之间导航 - ＆gt;主屏幕你需要定义单独的导航。使用主导航作为其他导航的常用导航

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"
/>