官網(wǎng) ： https://reactnavigation.org/docs/getting-started
安裝 依賴(lài)
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
//原生導(dǎo)航
//堆棧導(dǎo)航
//底部導(dǎo)航
//頂部安卓導(dǎo)航
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 對(duì)象里面
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
堆棧導(dǎo)航
- 01 導(dǎo)入
import {NavigationContainer} from '@react-navigation/native';
// 導(dǎo)航容器
import {createStackNavigator} from '@react-navigation/stack';
// 導(dǎo)入創(chuàng)建堆棧導(dǎo)航方法
- 02 創(chuàng)建 堆棧導(dǎo)航
const Stack = createStackNavigator(); - 03 創(chuàng)建導(dǎo)航需要的頁(yè)面
- 04 包裝到導(dǎo)航
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
/>
<Stack.Screen
name="Details"
component={Details}
/>
</Stack.Navigator>
</NavigationContainer>
// NavigationContainer 導(dǎo)航容器
// Stack.Navigator 堆棧導(dǎo)航
// Stack.Screen 堆棧導(dǎo)航頁(yè)面
頁(yè)面的跳轉(zhuǎn)
this.props.navigation
push //推入堆棧
replace //替換當(dāng)前頁(yè)面
goBack() //返回
popToTop() //回到頂層
參數(shù)的處理
- 傳遞參數(shù)
navigation.push(“Details”,{id:"abc"}) - 獲取參數(shù)
this.props.route.params.id - 配置初始化參數(shù)
<Stack.Screen initialParams={{id:1}}> - 堆棧導(dǎo)航參數(shù)
title="詳情",標(biāo)題
headerStyle:(backgroundColor:"#f30") 標(biāo)題欄樣式
底部導(dǎo)航
- 01 導(dǎo)入
import { NavigationContainer } from '@react-navigation/native';
// 導(dǎo)入導(dǎo)航容器
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
// 導(dǎo)入創(chuàng)建底部導(dǎo)航方法
- 02 創(chuàng)建
const Tab = createBottomTabNavigator(); - 03 包裝
<NavigationContainer />
<Tab.Navigator />
<Tab.Screen name={} component={} />
- 參數(shù)
Screen.options
tabBarLabel //底部標(biāo)簽名
tabBarlcon:({focused})=>( )} //圖標(biāo)
Navigator.tabBarOptions
activeTintColor //選中的顏色
- 切換
this.props.navigation.navigate("名稱(chēng)")
navigation.navigate(" Home")
頂部導(dǎo)航
使用步驟
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
// 導(dǎo)入創(chuàng)建頂部部導(dǎo)航方法
const TopTab = createMaterialTopTabNavigator();
// 01 導(dǎo)入并創(chuàng)建頂部導(dǎo)航
- 包裝
<TopTab.Navigator />
<TopTab.Screen componet={} name="" />
- 參數(shù)
Navigator
tabBarOptions
activeTintColor:"#f30",
//激活顏色
indicatorStyle:{backgroundColor:"#f30"},
//提示線(xiàn)條 css
inactiveTintColor:"#999",
//非激活顏色
tabStyle: { width: 150 },
//標(biāo)簽的樣式
scrollEnabled:true,
//可以滾動(dòng)
