2020-04-23

安装依赖

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>)标题右侧