简介

React Navigation 主要用于导航（StackNavigator），底部Tab导航（bottom-tabs），抽屉导航(drawer)

安装依赖

 // 安装react-navigation
yarn add @react-navigation/native
// 安装依赖库
yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

安装导航库

   //StackNavigator
   npm install @react-navigation/stack
   //TabNavigator
   npm install @react-navigation/bottom-tabs
   //DrawerNavigator
   npm install @react-navigation/drawer

StackNavigator 使用

引入组件

import { NavigationContainer } from ‘@react-navigation/native‘;
import { createStackNavigator } from ‘@react-navigation/stack‘;

创建stack

    const Stack = createStackNavigator();
    <NavigationContainer>
      <Stack.Navigator  initialRouteName = "Home"  
      > 
      <Stack.Screen name="Home"  component={HomeScreen} />
      <Stack.Screen  name="Login"  component={LoginScreen}   }
         />
      <Stack.Screen name="List" component={ListScreen}/> 
      </Stack.Navigator>
    </NavigationContainer>

属性介绍

• name:Screen名称 导航用
• component:页面组件

导航

主要方法

• navigate(‘component‘):函数大致意味着“转到这个屏幕”，如果你已经在那个屏幕上,则不会跳转
• push(‘component‘): 和navigate不同之处在于始终会跳转到新的Screen,不能用它来回退到之前的Screen
• goBack():回到上一个界面
• popToTop():回到顶部
  ps: navigate()可以直接返回到当前栈中的任何一个Screen

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View style={style.rootView} onLayout={this.onLayout}>
        <TouchableOpacity  onPress={() => this.props.navigation.navigate(‘Login‘,{name:"jack"})}>
          <Text >跳转登陆</Text>    
        </TouchableOpacity>
 
      </View>
    )
  }
}

传递参数
navigate(‘component‘,参数对象)和push()方法可以传入第二个参数

navigation.navigate(‘Login‘,{name:"jack"})}

获取参数
通过route.params获取传递的参数

this.props.route.params.name

初始参数

      <Stack.Screen  name="Login"  component={LoginScreen}  initialParams={{name:"初始名称"}}
         />

React Navigation 5.x 使用