詳解react-navigation6.x路由庫(kù)的基本使用
react-native項(xiàng)目初始化
打開cmd，cd到在要進(jìn)行rn項(xiàng)目建立的文件夾。
npx react-native init testRN
這里我的項(xiàng)目名設(shè)置為testRN，可以自行設(shè)定。
安裝react-native項(xiàng)目
連接安卓虛擬機(jī)或者usb調(diào)試真機(jī)，cd進(jìn)創(chuàng)建好的項(xiàng)目根目錄，yarn android安裝并啟動(dòng)。
yarn android
初次安裝完畢之后，手機(jī)未斷連的情況的話，后續(xù)只需虛擬機(jī)或者手機(jī)進(jìn)入項(xiàng)目app，然后pc在項(xiàng)目根目錄yarn start啟動(dòng)就可以了不用再次安裝，斷連之后可能得重新安裝。
yarn start
啟動(dòng)好了之后在cmd界面按r可以更新。
react-navigation路由庫(kù)安裝
內(nèi)容建立在android端測(cè)試，我沒(méi)有測(cè)試ios。
一口氣安裝下列包。
yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack
對(duì)安卓進(jìn)行額外配置，在testRN\android\app\src\main\java\com\testrn修改MainActivity.java文件。
代碼：
import android.os.Bundle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
使用路由庫(kù)
修改app.js為以下代碼
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
// NavigationContainer為路由的容器，將相關(guān)內(nèi)容都放在他中間
<NavigationContainer>
<Stack.Navigator>
{/* Stack.Screen為路由的窗口，name設(shè)置窗口名，用于跳轉(zhuǎn)，窗口的組件內(nèi)容放在component */}
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
路由跳轉(zhuǎn)與路由傳參
import * as React from 'react';
// 添加Button
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
// 添加navigation參數(shù)
function HomeScreen({navigation}) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
{/* 添加跳轉(zhuǎn)按鈕 */}
<Button
title="Go to Details"
// navigation.navigate('Details')用于跳轉(zhuǎn)，其中的Details指向?qū)?yīng)的窗口name
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
// NavigationContainer為路由的容器，將相關(guān)內(nèi)容都放在他中間
<NavigationContainer>
<Stack.Navigator>
{/* Stack.Screen為路由的窗口，name設(shè)置窗口名，用于跳轉(zhuǎn)，窗口的組件內(nèi)容放在component */}
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
設(shè)置路由標(biāo)題
窗口默認(rèn)會(huì)使用name作為標(biāo)題名，當(dāng)然也可以自行設(shè)定。
<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'my home'}} />
用my home代替Home作為導(dǎo)航標(biāo)題。
通常一級(jí)頁(yè)面跳轉(zhuǎn)去二級(jí)頁(yè)面時(shí)，也許會(huì)根據(jù)內(nèi)容不同展示不同的標(biāo)題，這時(shí)候有就需要?jiǎng)討B(tài)配置title。
<Stack.Screen name="Details" component={DetailsScreen}
options={({ route }) => ({ title: route.params.title })}
/>
然后只要在一級(jí)頁(yè)面跳轉(zhuǎn)時(shí)傳遞title就可以了。
<Button
title="Go to Details"
// navigation.navigate('Details')用于跳轉(zhuǎn)，其中的Details指向?qū)?yīng)的窗口name
onPress={() => navigation.navigate('Details', { title: '二級(jí)頁(yè)面' })}
/>
注意這里如果一級(jí)頁(yè)面沒(méi)有傳遞title，最好傳遞一個(gè)空對(duì)象或者在二級(jí)窗口上設(shè)置初始值否則會(huì)報(bào)錯(cuò)。
還可以手動(dòng)更新title，使用navigation.setOptions()，其修改的是screen上的options中的屬性。
<Button
title="Update the title"
onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>
自定義標(biāo)題組件
設(shè)置headerTitle回調(diào)返回一個(gè)函數(shù)式組件，組件內(nèi)自定義，可以是圖片。
function LogoTitle() {
return (
<Image
style={{ width: 50, height: 50 }}
source={require('./src/img/details.png')}
/>
);
}
<Stack.Screen name="Home" component={HomeScreen}
options={{
title: 'My home',
headerTitle: (props) => <LogoTitle {...props} />
}}
/>
標(biāo)題按鈕
一樣是在screen的options上，存在headerRight可以放按鈕。
<Stack.Screen name="Home" component={HomeScreen}
options={{
title: 'My home',
headerTitle: (props) => <LogoTitle {...props} />,
headerRight: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
}}
/>
headerBackImageSource可以修改回退按鈕圖片。
<Stack.Screen name="Details" component={DetailsScreen}
options={({ route }) => (
{
title: route.params.title,
headerBackImageSource: detailsImg,
}
)}
/>
到此這篇關(guān)于詳解react-navigation6.x路由庫(kù)的基本使用的文章就介紹到這了,更多相關(guān)react-navigation6.x路由庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react-router-dom?V6的配置使用實(shí)踐
本文主要介紹了react-router-dom?V6的配置使用實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
本篇文章主要介紹了React復(fù)制到剪貼板的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解
這篇文章主要為大家介紹了ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React Native仿美團(tuán)下拉菜單的實(shí)例代碼
本篇文章主要介紹了React Native仿美團(tuán)下拉菜單的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
本文主要介紹了React組件中默認(rèn)封裝了很多屬性，有的是提供給開發(fā)者操作的，其中有三個(gè)屬性非常重要：state、props、refs。感興趣的小伙伴可以參考閱讀2023-03-03
詳解Webpack+Babel+React開發(fā)環(huán)境的搭建的方法步驟
本篇文章主要介紹了詳解Webpack+Babel+React開發(fā)環(huán)境的搭建的方法步驟，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
我們?cè)诤笈_(tái)管理系統(tǒng)React項(xiàng)目開發(fā)中會(huì)有Table表格、Form表單、List列表、Button按鈕等組件，這個(gè)時(shí)候我們可以使用AntDesign來(lái)減少開發(fā)中不必要的樣式問(wèn)題，本文就介紹了eact項(xiàng)目中使用AntDesign，感興趣的可以了解一下2022-04-04
react-router-dom v6版本實(shí)現(xiàn)Tabs路由緩存切換功能
今天有人問(wèn)我怎么實(shí)現(xiàn)React-Router-dom類似標(biāo)簽頁(yè)緩存,很久以前用的是react-router v5那個(gè)比較容易實(shí)現(xiàn),v6變化挺大,但了解react的機(jī)制和react-router的機(jī)制就容易了,本文介紹react-router-dom v6版本實(shí)現(xiàn)Tabs路由緩存切換,感興趣的朋友一起看看吧2023-10-10
React實(shí)現(xiàn)多標(biāo)簽在有限空間內(nèi)展示
在業(yè)務(wù)中,需要在一個(gè)卡片組件中展示多個(gè)標(biāo)簽,標(biāo)簽組件高度相同,寬度和出現(xiàn)順序不同,要求標(biāo)簽只能在有限的空間內(nèi)展示,所以本文給大家介紹了React實(shí)現(xiàn)多標(biāo)簽在有限空間內(nèi)展示,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了React中setState的使用與同步異步的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03