安装
5.X
yarn 版本
yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm 版本
npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
react-native-reanimated 动画库
react-native-gesture-handler 跨平台手势库
react-native-screens 这个库基本不会单独使用，是react navigation的依赖，用原生代码实现了Screen组件（可以查看pad 内 相关代码），让页面都存在在Screen上，不安装的话，react-nvigation 会通过View实现，性能会很差。
react-native-safe-area-context 安全区域组件库 safe-area
react-native-community/masked-view 带蒙版的视图
如果你的RN 版本>=0.60, linking 是自动 你不需要 运行 react-native link. 但是你需要 在进行上面操作以后进行下面操作！！！！！
for ios
cd ios
pod install
for android
进入文件夹android/app/build.grade，在dependencies（依赖项）里添加代码(react-native-screens 相关)
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
在 android/app/src/main/java/下的MainActivity.java中对手势系统操作
package com.swmansion.gesturehandler.react.example;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "应用名";
}
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
}
为了使得android和iOS保持一致的体验，必须重新封装手势系统
如果还是没有解决问题 点击此处查看
最后操作 在index.js里添加
import 'react-native-gesture-handler';
// 如果不加这一行，在开发时是好的，在线上版本很有可能闪退。
如果要想实现导航仍然需要安装navigator库
三种导航，分别为StackNavigator栈导航、TabNavigator标签导航、DrawerNavigator抽屉导航 项目中需要哪种就需要安装相关依赖
6.X
yarn 版本
yarn add @react-navigation/native
yarn add react-native-screens react-native-safe-area-context react-native-gesture-handler
npm 版本
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler
for ios
cd ios
pod install
for android
进入文件夹android/app/src/main/java/
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
并且导入头文件
import android.os.Bundle;
其他操作
//StackNavigator
npm install @react-navigation/stack
//TabNavigator
npm install @react-navigation/bottom-tabs
//DrawerNavigator
npm install @react-navigation/drawer
StackNavigator
1·安装
//StackNavigator
npm install @react-navigation/stack
@react-navigation/stack依赖@react-native-community/masked-view所以要确保masked-view已经安装
介绍以及使用
createStackNavigator 返回一个实体包含了Screen 和 Navigator.他们是用来配置的navigator 的组件 ，并且Navigator组件 必须包裹着Screen组件
NavigationContainer 是一个处理Navigator树 和navigation state,NavigationContainer必须在最外层。一般放在app.js中.
如果改变 改变某一个页面的配置可以用 option进行修改，统一修改那么用screenOptions 后面会详细讲解
//App.js
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({navigation}) {
return (
Home Screen
);
}
function DetailsScreen({navigation}) {
const { itemId, otherParam } = route.params;
return (
Details Screen
{itemId}
{otherParam}
);
}
const Stack = createStackNavigator();
function App() {
return (
);
}
export default App;
1 传值问题
如果想传递更多其他的参数可以通过callback 形式传递 ,但是要注意添加了callback 需要自行添加 React.memo 或者 React.PureComponent避免没有必要的渲染。
{props =>
navigate 到某一个界面 在本界面想要跳转本页面 需要修改navigate为push.如果想改变参数可以通过下面固定API进行修改 。
// 修改 Options 不会内容不会发生修改
props.navigation.setOptions({
title: 'hhhhhhh',
})
// 修改上一级页面传过来的 Params 每一次修改会引起组件重新渲染
props.navigation.setParams({
name: 'linzhiqinghaoshuai',
})
如果想传递数据到上一个页面，举例而言 从 DetailsScreen 返回 HomeScreen 想要携带数据那么返回方法 需要修改push为navigate
// Pass and merge params back to home screen
navigation.navigate({
name: 'Home',
params: { post: postText }
});
2 配置navigationBar
首先 要注意 配置 navigationBar 有两个属性
如果想要改变某一个页面的配置可通过Stack.Screen节点里的option进行修改，统一修改那么用Stack.Navigator节点里的screenOptions 。
-
Stack.Navigator的配置选项
-
initialRouteName
展示的默认路由界面 -
screenOptions
屏幕参数设置
2-1.headerStyle:配置顶部 header view
2-2.headerTintColor: 返回按钮和标题的颜色
2-3.headerTitleStyle: 标题文字的颜色 Text.
-
keyboardHandlingEnabled
导航到新页面键盘是否关闭 -
mode
页面跳转的动画类型
4-1.card：使用标准的iOS和Android屏幕过渡。默认值.
4-2.modal：由底边往上. -
headerMode
指定标题的呈现方式
5-1.float：页面返回标题渐变
4-2.screen：页面返回 标题随屏幕一起淡入和淡出。
5-3.none：没有标题header bar。
-
Stack.Screen 的配置选项
-
-
options
- 1-1. title
头部标题 - 1-2. header
函数，返回一个React Element，显示为标题。 - 1-3. headerShown
是显示还是隐藏屏幕标题。默认情况下显示标题，除非将headerMode其设置为none。设置为false隐藏标题。在特定屏幕上隐藏标题时，您可能还需要将headerModeprop设置为screen。 - 1-4. headerTitle
字符串或返回标头要使用的React元素的函数。默认为 title 选项值. - 1-5. headerTitleAlign
对齐标题。可选择left或center。默认为iOS-center和Android-left - 1-6. headerTitleAllowFontScaling
标头标题字体是否应缩放以符合“文本大小”辅助功能设置。默认为false。 - 1-7. headerBackAllowFontScaling
后退按钮标题字体是否应缩放以符合“文本大小”辅助功能设置。默认为false。 - 1-8. headerBackImage
该函数返回一个React Element以在标题的后退按钮中显示自定义图像。使用函数时，它将tintColor在其参数对象中接收。默认为带有背面图像源的Image组件，它是平台的默认背面图标图像（iOS上为人字形，Android上为箭头）。 - 1-9. headerBackTitle
iOS上的后退按钮使用的标题字符串。默认为上一个场景的headerTitle。 - 1-10. headerBackTitleVisible
为后退按钮标题是否可见提供了一个合理的默认值，但是如果您想覆盖它，则可以使用true或false在此选项中使用 - 1-11. headerTruncatedBackTitle
当headerBackTitle屏幕上不适合显示后退按钮时使用的标题字符串。"Back"默认情况下。 - 1-12. headerRight
该函数返回一个React元素以显示在标题的右侧。 - 1-12. headerLeft
返回React元素以显示在标题左侧的函数。使用函数时onPress，在呈现时它会接收许多参数
注意可以通过navigation.setOptions改变相应数值
- 1-1. title
-
-
function StackScreen() {
return (
({
headerTitle: props =>
);
}
function HomeScreen({ navigation }) {
const [count, setCount] = React.useState(0);
React.useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
.....and so on 更多点击查看 详情
TabNavigator
底部导航条，有的app开发的时候需要用到底部导航栏切换。使用方法跟StackNavigator类似。注：如果 TabNavigator 和 StackNavigator 混和使用，可以用StackNavigator 将 TabNavigator 包裹起来。
1·安装
npm install @react-navigation/bottom-tabs
代码演示
import 'react-native-gesture-handler';
import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import DetailsScreen from './DetailsScreen';
import HomeScreen from './HomeScreen';
const Tab = createBottomTabNavigator();
function App() {
return (
);
}
export default App;
2·TabNavigator 的配置选项
-
initialRouteName
首次加载时要渲染的路由名称。
-
screenOptions
屏幕的默认选项。
-
backBehavior
返回按钮处理的行为。
-
initialRoute
返回初始标签
-
order
返回上一个标签页（按照标签页中显示的顺序）
-
history
返回上次访问的标签页
-
lazy
默认为true。如果为false，则所有选项卡都将立即呈现。如果为true，则仅在首次使选项卡处于活动状态时才显示它们。注意：选项卡不会在后续访问时重新呈现。
-
tabBar
返回React元素
-
tabBarOptions
包含选项卡栏组件的配置对象。它可以包含以下属性：
- activeTintColor
选中标签的标签和图标颜色。 - **activeBackgroundColor **
选中标签的背景颜色。 - inactiveTintColor
未选中标签的标签和图标颜色。 - **inactiveBackgroundColor **
未选中标签的背景颜色。 - showLabel
是否显示标签，默认为true。 - showIcon
是否显示标签图标，默认为true。 - style
标签栏的样式对象。 - labelStyle
标签标签的样式对象。 - labelPosition
在何处显示与标签图标相关的标签标签。可用值为beside-icon和below-icon。默认为beside-icon。 - tabStyle
标签的样式对象。 - allowFontScaling
标签字体是否应缩放以符合“文本大小”辅助功能设置，默认为true。 - adaptive
标签图标和标签对齐方式是否应根据屏幕尺寸而改变？true对于iOS 11 false，默认值为。如果，标签图标和标签始终垂直对齐。当时true，标签图标和标签在平板电脑上水平对齐。 - safeAreaInset
覆盖forceInset道具。默认为{ bottom: ‘always’, top: ‘never’ }。可用的键top | bottom | left | right随值一起提供’always’ | ‘never’。 - keyboardHidesTabBar
默认为false。如果true在键盘打开时隐藏标签栏。
- activeTintColor
-
options
可用于配置导航内的各个屏幕。支持的选项有：
- title
通用标题可以用作备用headerTitle和tabBarLabel。 - tabBarVisible
true或false显示或隐藏标签栏（如果未设置），则默认为true。 - tabBarIcon
给定的函数{ focused: boolean, color: string, size: number }返回一个React.Node，以显示在选项卡栏中。 - tabBarLabel
显示在选项卡栏中的选项卡的标题字符串或给定的函数将{ focused: boolean, color: string }返回React.Node，以显示在选项卡栏中。未定义时，使用场景title。 - tabBarButton
该函数返回一个React元素以呈现为选项卡按钮。它包装图标和标签并实现onPress。TouchableWithoutFeedback默认情况下渲染。tabBarButton: props =>会TouchableOpacity改为使用。 - tabBarAccessibilityLabel
选项卡按钮的辅助功能标签。当用户点击选项卡时，屏幕阅读器会读取该内容。如果您没有标签的标签，建议您进行设置。 - tabBarTestID
在测试中找到此选项卡按钮的ID。 - unmountOnBlur
离开该屏幕时是否应卸载该屏幕。卸载屏幕将重置屏幕中的任何本地状态以及屏幕中嵌套导航器的状态。默认为false。
- title
DrawerNavigator导航
和现在QQ类似导航
1·安装
npm install @react-navigation/drawer
代码演示
import 'react-native-gesture-handler';
import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import DetailsScreen from './DetailsScreen';
import HomeScreen from './HomeScreen';
const Drawer = createDrawerNavigator();
function App() {
return (
);
}
export default App;