您好,登錄后才能下訂單哦!
這篇文章主要講解了“react-navigation6.x路由庫的基本使用方法是什么”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“react-navigation6.x路由庫的基本使用方法是什么”吧!
打開cmd,cd到在要進行rn項目建立的文件夾。
npx react-native init testRN
這里我的項目名設置為testRN,可以自行設定。
連接安卓虛擬機或者usb調試真機,cd進創建好的項目根目錄,yarn android安裝并啟動。
yarn android
初次安裝完畢之后,手機未斷連的情況的話,后續只需虛擬機或者手機進入項目app,然后pc在項目根目錄yarn start啟動就可以了不用再次安裝,斷連之后可能得重新安裝。
yarn start
啟動好了之后在cmd界面按r可以更新。
內容建立在android端測試,我沒有測試ios。
一口氣安裝下列包。
yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack
對安卓進行額外配置,在testRN\android\app\src\main\java\com\testrn
修改MainActivity.java文件。
代碼:
import android.os.Bundle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(null); }
修改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為路由的容器,將相關內容都放在他中間 <NavigationContainer> <Stack.Navigator> {/* Stack.Screen為路由的窗口,name設置窗口名,用于跳轉,窗口的組件內容放在component */} <Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator> </NavigationContainer> ); } export default App;
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參數 function HomeScreen({navigation}) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> {/* 添加跳轉按鈕 */} <Button title="Go to Details" // navigation.navigate('Details')用于跳轉,其中的Details指向對應的窗口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為路由的容器,將相關內容都放在他中間 <NavigationContainer> <Stack.Navigator> {/* Stack.Screen為路由的窗口,name設置窗口名,用于跳轉,窗口的組件內容放在component */} <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); } export default App;
窗口默認會使用name作為標題名,當然也可以自行設定。
<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'my home'}} />
用my home代替Home作為導航標題。
通常一級頁面跳轉去二級頁面時,也許會根據內容不同展示不同的標題,這時候有就需要動態配置title。
<Stack.Screen name="Details" component={DetailsScreen} options={({ route }) => ({ title: route.params.title })} />
然后只要在一級頁面跳轉時傳遞title就可以了。
<Button title="Go to Details" // navigation.navigate('Details')用于跳轉,其中的Details指向對應的窗口name onPress={() => navigation.navigate('Details', { title: '二級頁面' })} />
注意這里如果一級頁面沒有傳遞title,最好傳遞一個空對象或者在二級窗口上設置初始值否則會報錯。
還可以手動更新title,使用navigation.setOptions()
,其修改的是screen上的options中的屬性。
<Button title="Update the title" onPress={() => navigation.setOptions({ title: 'Updated!' })} />
設置headerTitle回調返回一個函數式組件,組件內自定義,可以是圖片。
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} /> }} />
一樣是在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, } )} />
感謝各位的閱讀,以上就是“react-navigation6.x路由庫的基本使用方法是什么”的內容了,經過本文的學習后,相信大家對react-navigation6.x路由庫的基本使用方法是什么這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。