React Navigation - 在屏幕之间导航

Posted 2023-02-23

【中文标题】React Navigation - 在屏幕之间导航

【英文标题】：React Navigation - navigating between screens

【发布时间】：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”，它会正确导航到这些屏幕。

如何导航到另一个屏幕？

【参考方案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"
/>