官網(wǎng) ： 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';
//  導入創(chuàng)建堆棧導航方法

• 02 創(chuàng)建 堆棧導航
  const Stack = createStackNavigator();
• 03 創(chuàng)建導航需要的頁面
• 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()       //回到頂層

參數(shù)的處理

• 傳遞參數(shù)
  navigation.push(“Details”,{id:"abc"})
• 獲取參數(shù)
  this.props.route.params.id
• 配置初始化參數(shù)
  <Stack.Screen initialParams={{id:1}}>
• 堆棧導航參數(shù)
  title="詳情",標題
headerStyle:(backgroundColor:"#f30") 標題欄樣式

底部導航

• 01 導入

import { NavigationContainer } from '@react-navigation/native';
// 導入導航容器
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
// 導入創(chuàng)建底部導航方法

• 02 創(chuàng)建
  const Tab = createBottomTabNavigator();
• 03 包裝

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

• 參數(shù)
  Screen.options

tabBarLabel //底部標簽名
tabBarlcon:({focused})=>( )} //圖標

Navigator.tabBarOptions
activeTintColor //選中的顏色

• 切換

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

頂部導航

使用步驟

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
// 導入創(chuàng)建頂部部導航方法
const TopTab = createMaterialTopTabNavigator();
// 01 導入并創(chuàng)建頂部導航

• 包裝

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

• 參數(shù)
  Navigator
  tabBarOptions

activeTintColor:"#f30",
//激活顏色
indicatorStyle:{backgroundColor:"#f30"},
//提示線條 css
inactiveTintColor:"#999",
//非激活顏色
tabStyle: { width: 150 },
//標簽的樣式
scrollEnabled:true,
//可以滾動