引言
本文主要包含以下几部分:
- 初始化 React Native 项目
- Tab + Bottom + Stack 混合导航
- 最终效果 Gif
一、初始化 React Native 项目
RN 基础环境配置
项目初始化可以参考官方文档,写的比较详细。其中,新建项目主要有以下步骤:
- init
npx react-native init RNLaboratory
- run
cd RNLaboratory
react-native run-ios
- 注意:
- 安装 CocoaPods
由于 RN 0.60+ 版本依赖 CocoaPods,但是国内难以访问此仓库。所以,在执行 npx react-native init RNLaboratory
进行初始化项目时会卡在 info Installing required CocoaPods dependencies,如下图所示:
此时可以安装国内镜像,参考文档。若实现安装好此镜像,当执行 npx react-native init RNLaboratory
时,会发现初始化项目很快,如图所示:
- 若在 Xcode 直接运行应用时应选择 .xcworkspace 文件,而不是 .xcodeproj 文件。
当以上步骤顺利完成后,使用命令 react-native run-ios
启动 APP
,如下所示:
二、Tab + Bottom + Stack 混合导航
1. 选择一个合适的导航库
在使用React Native开发移动应用程序时,最重要的步骤之一就是选择合适的导航库。一般来说,有以下两种选择方案:
在项目 React Native 实验室 中选择了 react-navigation
作为导航库,在此不做详细对比,有兴趣的同学可以参考以下链接:
- React Navigation vs. React Native Navigation: Which is right for you?
- React导航的主要贡献者Brent Vatne的精彩演讲
- Brent Vatne的演讲
2. 安装及配置
可参考官方文档,其主要流程如下:
安装
- 安装
react-navigation
yarn add react-navigation
# or with npm
npm install react-navigation
- 安装
react-navigation
相关依赖
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
IOS 配置
cd ios
pod install
cd ..
Android 配置
- 修改
android/app/build.gradle
, 在该文件dependencies
中添加如下两行代码:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
- 修改
android/app/src/main/java/com/APP_NAME/MainActicity.java
,如下所示:
package com.reactnavigation.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 "Example";
}
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
3. react-navigation 简介
- createStackNavigator
- createSwitchNavigator
- createAnimatedSwitchNavigator
- createDrawerNavigator
- createBottomTabNavigator
- createMaterialBottomTabNavigator
- createMaterialTopTabNavigator
注意:
- 若运行时报以下错误,可根据提示知相应的API已由
react-navigation
移至相应的库,需安装相应的依赖。
- 若引入
react-native-vector-icons
时出现以下错误,可参考 How to use vector icons in your react-native project 解决。
最终效果 Gif
在项目 React Native 实验室 中基于 createStackNavigator
、createSwitchNavigator
、createDrawerNavigator
及 createMaterialBottomTabNavigator
等实现了基础路由跳转功能。效果图如下:
后话
欢迎关注我的个人公众号:剪刀手解柒