阅读 562

React Native搭建开发环境/link原生依赖问题

环境搭建

一、 安装依赖

必须安装的依赖有:Node、Python2 以及 JDK 、React Native 命令行工具和 Android Studio。

1. 官网下载安装Node(Node 的版本必须高于 8.3)

2. 官网下载安装Python2(版本必须为 2.x)

3. 官网下载安装JDK(版本必须是 1.8)

jdk配置(右键偶的电脑—属性—高级系统设置—环境变量):

①. 创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录

②. 把platform-tools目录添加到环境变量Path中 ③. 接下来配置JAVA_HOME(缺了这一步Android studio会显示找不到jdk安装目录,路径不包含bin文件)

    新建变量:JAVA_HOME
    变量值:JDK安装目录
复制代码

④. 在系统变量里寻找 Path 变量,选择编辑,新建两个变量值%JAVA_HOME%\bin,%JAVA_HOME%\jre\bin

⑤. 新建环境变量,命名为CLASSPATH,变量值填入.;%Java_Home%\bin;%Java_Home%\lib\dt.jar;%Java_Home%\lib\tools.jar

⑥. 记得配置(官网无记录):JRE_HOME C:\Program Files\Java\jre7(根据jdk安装位置更改路径)

jdk安装且环境配置完成,可在cmd中检查是否安装成功,命令:java -version

4. React Native命令行工具(react-native-cli)安装:npm install -g yarn react-native-cli

5. 安装Android Studio

二、 Android开发环境

1. 安装翻墙工具

2. 安装Android SDK

Android Studio默认会安装最新版本的Android SDK

①. 在 Android Studio 的欢迎界面中找到 SDK Manager(右下角选项)。点击Configure,然后就能看到SDK Manager

②. 在 SDK Manager 中选择SDK Platforms选项卡,然后在右下角勾选Show Package Details。展开Android 9 (Pie)选项,确保勾选了下面这些组件(重申你必须使用稳定的翻墙工具,否则可能都看不到这个界面)

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

③. 然后点击SDK Tools选项卡,同样勾中右下角的Show Package Details。展开Android SDK Build-Tools选项,确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。 最后点击"Apply"来下载和安装这些组件。

3. 配置ANDROID_HOME环境变量

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(SDK 默认是安装目录:c:\Users\你的用户名\AppData\Local\Android\Sdk

4. 把 platform-tools 目录添加到环境变量 Path 中

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去(此目录的默认路径为:c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools)。

注:添加目录路径要和之前path已有路径用分号分割

三、创建新项目

使用 React Native 命令行工具来创建一个名为"demo"的新项目:react-native init demo

创建指定RN版本项目: react-native init demo --verbose --version 0.44.0(版本号)

四、编译并运行React Native应用

进入项目cd demo

运行项目react-native run-android

link问题

引入navigation

  1. 在 React Native 项目中安装react-navigation这个包: npm install --save react-navigation
  2. 安装 react-native-gesture-handler: npm install --save react-native-gesture-handler
  3. Link 所有的原生依赖: react-native link react-native-gesture-handler

相关配置文件

  1. android>settings.gradle
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir,
'../node_modules/react-native-gesture-handler/android')
复制代码
  1. android>app>build.gradle
dependencies {
    implementation project(':react-native-gesture-handler')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

复制代码
  1. android>app>src>main>java>com>MainApplication.java
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
复制代码
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new RNGestureHandlerPackage(),
      );
    }
复制代码
  1. android>app>src>main>java>com>MainActivity.java
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
复制代码
@Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }

复制代码

注意链接原生依赖(react-native link)时的坑

1. 链接原生库react-native link后,注意android>app>src>main>java>com> MainApplication.java文件里面,有没有重复,如下:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new RefreshReactPackage(),
        new RNGestureHandlerPackage()
    );
}
复制代码

你执行函数的命令因为重复执行link命令重复添加了,手动删除多余的即可;

还有settings.gradle也会出现多余的

2. android\settings.gradle文件中反斜杠更改:

错例:

project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '..\node_modules\react-native-linear-gradient\android')
复制代码

3. 错误提示效果:app:compileDebugJavaWithJavac

解决:用android studio打开项目进行编译后再重新运行项目即可;

  • 使用android studio打开android文件即可(而不是打开整个文件)
  • 如果还是报错:将项目android文件下的 ***.iml 文件删掉,重新导入编译即可

手动link配置

例:配置react-native-image-picker(一个集成相机和相册的功能的第三方库)示例:

react-native-image-picker使用

  1. 首先,安装下该插件npm install react-native-image-picker@latest --save
  2. 针对Android和iOS平台分别进行配置:

android 平台配置

  1. 在android/settings.gradle文件中添加如下代码:
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')

复制代码
  1. 在android/app/build.gradle文件的dependencies中添加如下代码:
compile project(':react-native-image-picker')
复制代码
  1. 在AndroidManifest.xml文件中添加权限:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
复制代码
  1. 最后在MainApplication.Java文件中添加如下代码:
import com.imagepicker.ImagePickerPackage;
 new ImagePickerPackage()
复制代码

这样Android环境就配置好了。

iOS平台配置

  1. 打开Xcode打开项目,点击根目录,右键选择 Add Files to ‘XXX’,选中项目中的该路径下的文件即可:node_modules -> react-native-image-picker -> ios -> select RNImagePicker.xcodeproj
  2. 添加成功后使用link命令:react-native link react-native-image-picker 。
  3. 打开项目依次使用Build Phases -> Link Binary With Libraries将RNImagePicker.a添加到项目依赖。
  4. 对于iOS 10+设备,需要在info.plist中配置NSPhotoLibraryUsageDescription和NSCameraUsageDescription。

前端RN打包

在 Android Studio 中打包,即生成离线的 jsbundle 文件:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
复制代码

路径解析:

index.android.js:打包目标文件

android/app/src/main/assets/index.android.bundle:打包生成文件所在目录

app/src/main/res/:RN中用到的静态资源文件打包后生成文件所在目录

关注下面的标签,发现更多相似文章
评论