搭建开发环境和创建项目

基于 0.64 版本

1.安装

参考 搭建开发环境

2. 创建项目

npx react-native init 项目名

3. iOS（可能会遇到问题）

1. 升级 cocoapods 到 1.10.0 及以上

gem install cocoapods --user-install

2. 无法安装Flipper，先注释

3. Xcode 编译运行 iOS 出现如下错误

解决方法，杀掉对应进程

查找进程，数字为对应端口号

lsof -i:8081

杀掉进程 数字为对应PID

kill 61385

4. 命令运行

yarn ios

4. 安卓（可能会遇到问题）

1. 查看JDK版本号

javac -version

2. 查看shell类型

echo $0

3. 修改环境变量，需要调用 source ~/.bash_profile 使其生效

4. Android Studio 打开报错

This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 4.1 or newer.

这表示当前Android Studio的版本太低，将其版本升级即可。

上面菜单栏中Help--Check for Updates

5. 修改maven为国内加速

将路径下

android/build.gradle

中的

google()
jcenter()

替换成下面的

maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/google' }

6. 命令运行

yarn Android

安装插件

矢量图（react-native-vector-icons）

1. 安装

yarn add react-native-vector-icons

2. iOS 配置

npx pod-install ios

修改Info.plist

<key>UIAppFonts</key>
<array>
        <string>FontAwesome.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialIcons.ttf</string>
</array>

3. 安卓配置

android/app/build.gradle 下增加

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

4. 参考

react-native-vector-icons

npx pod-install ios

导航条 (react-navigation)

1. 安装

• 基础

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

说明：

1. @react-navigation/native:导航栏
2. react-native-reanimated: 动画库
3. react-native-gesture-handler: 手势库
4. react-native-screens: 原生组件
5. react-native-safe-area-context: 异形屏安全域
6. @react-native-community/masked-view: 堆栈式导航使用

• 堆栈导航

yarn add @react-navigation/stack

• 标签导航

yarn add @react-navigation/bottom-tabs

• 顶部标签栏(未使用）

yarn add @react-navigation/material-top-tabs react-native-tab-view

2. iOS 配置

npx pod-install ios

3. 安卓配置

更新 MainActivity.java，参考 react-native-gesture-handler

4. 参考

react-navigation react-native-gesture-handler

矢量图（react-native-vector-icons）

1. 安装

2. iOS 配置

3. 安卓配置

4. 参考

工具

配置别名

yarn add babel-plugin-root-import --dev

babel.config.js文件中增加如下内容

 "plugins": [
    [
      "babel-plugin-root-import",
      {
        "rootPathSuffix": "./src/",
        "rootPathPrefix": "@/"
      }
    ]
  ],

babel-plugin-root-import

暂未使用 babel-plugin-module-resolver