React-native导航总结

1.安装依赖

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

2.配置
在android/app/build.gradle dependencies 对象里面

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

3.堆栈导航
1.导入

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

2. 创建 堆栈导航

const Stack = createStackNavigator();

3.创建导航需要的界面

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

4.包装导航

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

5.页面的跳转
this.props.navigation
push 推入堆栈
replace 替换当前页面
goBack() 返回
popToTop() 回到顶层
6.参数的处理

navigation.push(“Details”,{id:"abc"}) //传递参数
this.props.route.params.id	//获取参数
<Stack.Screen   initialParams={{id:1}}>	//配置初始化参数