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 过程中的总结，还有一些方法的注意事项，基本都可以在官方文档找到答案
