RN版本：0.63.4
系統：Win10
前言
本系列文檔是React Native學習筆記，主要記錄學習過程中遇到的問題和注意點。 如果有人希望按照此文檔開始學習，那么最好有一些Android和前端開發基礎，因為此文檔只會記錄作者的學習過程中的重點難點,而不會詳細列出每一個步驟。
組件的選擇
移動應用基本不會只由一個頁面組成。管理多個頁面的呈現、跳轉的組件就是我們通常所說的導航器。 React Native 中現有的使用較多的導航組件有:
-
react navigation為ReactNative官方維護插件，使用上相對較簡單，使用純js實現。 -
react native navigation為第三方維護插
件，需要修改原生配置文件，使用APP原生modules實現。
一般來說，我們選擇組件的時候，不僅要考慮組件的功能是否符合自己的需求，還要考慮組件是否被社區支持。一旦使用的組件過時或者被棄用，切換組件是一件很痛苦的事情，所以我這里推薦社區今后主推的方案: react-navigation
安裝導航組件
首先執行以下命令之一開始安裝
npm: npm install @react-navigation/native
yarn: yarn add @react-navigation/native
然后，還需要安裝其他組件
npm: npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn: yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
對于在Mac上進行ios開發的項目，還需要cd到ios文件夾下執行以下命令
pod install
如果這一步驟遇到install失敗的情況，大部分是因為網絡的問題，這個時候就需要翻墻并配置終端使用代理,然后重新pod install
最后，在使用導航組件之前，需要確保以下代碼處在App的最頂端，一般是index.js或者App.js
import 'react-native-gesture-handler';
使用組件
使用導航組件，需要用 NavigationContainer 將整個App包住，一般這一步也在index.js或者App.js完成
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>
{/* Rest of your app code */}
</NavigationContainer>
);
}
Stack Navigator
在瀏覽器中，我們可以通過a標簽來實現在頁面之間跳轉，瀏覽器會為我們提供返回功能和瀏覽歷史。類似的，在React Navigation中Stack Navigator為我們提供了在頁面之間切換并管理導航歷史的方法。
這里，我一般會把StackNavigator和Android中的Activity Stack機制類比來理解，Android平臺設計了Activity Stack機制用于管理Activity，其遵循先進后出的原則，系統總是顯示位于棧頂的Activity。在操作應用程序時，每次啟動新的Activity，都會將此壓入Activity Stack，當用戶執行返回操作時，移除Activity Stack頂上的Activity，這樣就實現了返回上一個Activty的功能。直到用戶一直返回到Home Screen，這時候可以理解為移除了Activity Stack所有的Activity。
對于StackNavigator也是這樣，點擊返回按鈕默認總會返回上個頁面。
首先，我們需要安裝 @react-navigation/stack
npm: npm install @react-navigation/stack
yarn: yarn add @react-navigation/stack
通過createStackNavigator方法創建Stack對象，這個對象有兩個屬性:Screen和Navigator,Screen的子節點就是導航器的路由。
import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options={{title: 'Home'}} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
在這里，Screen還可以通過更多的屬性進行改變,比如:
{
title: title,
headerStyle: {
backgroundColor: '#1E90FF',
// elevation設置為零可以去掉header下部的線
// 那條線實際上就是header高于其他部分的視覺效果
elevation: 0,
shadowOpacity: 0,
},
headerBackTitle: 'Return',
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center',
};
切換頁面并傳遞參數
示例如下
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
/* 1. Navigate to the Details route with params */
navigation.navigate('Details', {
itemId: 86,
otherParam: 'anything you want here',
});
}}
/>
</View>
);
}
function DetailsScreen({ route, navigation }) {
/* 2. Get the param */
const { itemId, otherParam } = route.params;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Text>itemId: {JSON.stringify(itemId)}</Text>
<Text>otherParam: {JSON.stringify(otherParam)}</Text>
<Button
title="Go to Details... again"
// 如果要重復進入同一個頁面，需要將navigate改為push
// 即 navigation.push('Details'),否則不會起作用
onPress={() =>
navigation.push('Details', {
itemId: Math.floor(Math.random() * 100),
})
}
/>
<Button title="Go to Home"
onPress={() => navigation.navigate('Home')} />
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
特殊地，如果要傳遞參數到被嵌套的頁面，比如SettingsScreen是MineScreen上的導航器內的頁面，如果要傳遞到SettingsScreen
navigation.navigate('Mine', {
screen: 'Settings',
params: { user: 'jane' },
});
React Navigation 生命周期事件
React Navigation在窗口狀態發生改變的時候，提供了相應的事件：'focus' 和 'blur'
可以通過如下方法監聽事件，并在窗口狀態發生變化的時候進行相應的處理
function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="First">
{() => (
<SettingsStack.Navigator>
<SettingsStack.Screen
name="Settings"
component={SettingsScreen}
/>
<SettingsStack.Screen name="Profile" component={ProfileScreen} />
</SettingsStack.Navigator>
)}
</Tab.Screen>
<Tab.Screen name="Second">
{() => (
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={HomeScreen} />
<HomeStack.Screen name="Details" component={DetailsScreen} />
</HomeStack.Navigator>
)}
</Tab.Screen>
</Tab.Navigator>
</NavigationContainer>
);
}
focus：
function Profile({ navigation }) {
React.useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
// Screen was focused
// Do something
});
return unsubscribe;
}, [navigation]);
return <ProfileContent />;
}
blur:
import { useFocusEffect } from '@react-navigation/native';
function Profile() {
useFocusEffect(
React.useCallback(() => {
// Do something when the screen is focused
return () => {
// Do something when the screen is unfocused
// Useful for cleanup functions
};
}, [])
);
return <ProfileContent />;
}
以上就是我在使用 React Navigation 過程中的總結，還有一些方法的注意事項，基本都可以在官方文檔找到答案
