安装 依赖
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';
// 导入创建堆栈导航方法
创建导航需要的页面
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
/>
<Stack.Screen
name="Details"
component={Details}
/>
</Stack.Navigator>
</NavigationContainer>
页面的跳转
this.props.navigation
push推入堆栈
replace 替换当前页面
goBack() 返回
popToTop() 回到顶层
堆栈导航参数
title:"详情", 标题
headerStyle:{backgroundColor:"#f30"}, 标题栏样式
headerTintColor:"#FFF", 文本提示颜色
headerTitleStyle:{fontWeight:'bold'}, 标题样式
headerRight:()=>(<Text style={{color:"#fff",paddingRight:15}}>设置</Text>)标题右侧
