React Native导航

点击进入官网

安装

• npm install @react-navigation/native
  原生导航
• npm install @react-navigation/stack
  堆栈导航
• npm install @react-navigation/bottom-tabs
  底部导航
• npm install @react-navigation/material-top-tabs react-native-tab-view
  顶部安卓导航
• npm install
  react-native-reanimated
  react-native-gesture-handler
  react-native-screens
  react-native-safe-area-context @react-native-community/masked-view

配置

• 在android/app/build.gradle
  dependencies 对象里面

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

堆栈导航

导入

import {NavigationContainer} from '@react-navigation/native';
//  导航容器
import {createStackNavigator} from '@react-navigation/stack';
//  导入创建堆栈导航方法

创建堆栈导航

const Stack = createStackNavigator();

创建导航需要的页面

包装到导航

 <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen 
            name="Home" 
            component={Home}
                />
          <Stack.Screen 
            name="Details" 
            component={Details}         
            />
        </Stack.Navigator>
      </NavigationContainer>

• NavigationContainer 导航容器
• Stack.Navigator 堆栈导航
• Stack.Screen 堆栈导航页面

页面的跳转

this.props.navigation

• push 推入堆栈
• replace 替换当前页面
• goBack() 返回
• popToTop() 回到顶层

参数的处理

• 传递参数

navigation.push("Details",{id:"abc"})

• 获取参数

this.props.route.params.id

• 配置初始化参数

<Stack.Screen   initialParams={{id:1}}></Stack.Screen>