ReactNactive导航

官网 ： https://reactnavigation.org/docs/getting-started

安装 依赖

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'

堆栈导航

• 01 导入

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

• 02 创建 堆栈导航
  const Stack = createStackNavigator();
• 03 创建导航需要的页面
• 04 包装到导航

<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}}>
• 堆栈导航参数
  title="详情",标题
headerStyle:(backgroundColor:"#f30") 标题栏样式

底部导航

• 01 导入

import { NavigationContainer } from '@react-navigation/native';
// 导入导航容器
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
// 导入创建底部导航方法

• 02 创建
  const Tab = createBottomTabNavigator();
• 03 包装

<NavigationContainer />
  <Tab.Navigator />
    <Tab.Screen  name={} component={} />

• 参数
  Screen.options

tabBarLabel //底部标签名
tabBarlcon:({focused})=>( )} //图标

Navigator.tabBarOptions
activeTintColor //选中的颜色

• 切换

this.props.navigation.navigate("名称")
navigation.navigate(" Home")

顶部导航

使用步骤

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
// 导入创建顶部部导航方法
const TopTab = createMaterialTopTabNavigator();
// 01 导入并创建顶部导航

• 包装

<TopTab.Navigator />
    <TopTab.Screen componet={} name="" />

• 参数
  Navigator
  tabBarOptions

activeTintColor:"#f30",
//激活颜色
indicatorStyle:{backgroundColor:"#f30"},
//提示线条 css
inactiveTintColor:"#999",
//非激活颜色
tabStyle: { width: 150 },
//标签的样式
scrollEnabled:true,
//可以滚动