初识React Native(一)—集成到原生Android项目

1.创建Android工程

2.Android工程创建完成后,在Android studio左下角打开Terminal窗口,输入: [b]npm init 命令(该命令是来生成package.json文件的,改文件即React Native的配置文件,当我们输入该命令后回车,会提示我们输入一些基本的信息,选择填写即可),如图:[/b]



3.然后执行命令: [b]npm install –save react react-native,该命令用于安装React与React Native相关的文件;[/b]



4.在项目的根目录创建.flowconfig文件,该文件的内容可以从Facebook 的GitHub上下载, 查看这里, 将其内容copy进去即可;



5.接下来在我们项目的根目录下的package.json文件中的scripts节点下添加改句:

"start": "node node_modules/react-native/local-cli/cli.js start"

6.在我们的项目根目录下添加index.android.js文件,该文件即是我们的RN界面(在新版本的React Native中,可将该文件改为index.js),然后在该文件中添加我们React Native界面的代码,例如简单的HelloWorld:

代码如下:

import React, { Component } from 'react';
import { Text, AppRegistry } from 'react-native';

export default class App extends Component {
render() {
return ( <Text>Hello world!</Text>);
}}
AppRegistry.registerComponent('application', () => App);

7.在App的build.gradle文件中添加Facebook React的依赖包,(React Native中支持的最新版本是23,即SDK版本为23,以及appcompat-v7:23.0.1,同时最低的SDK为16),如果Android Studio为3.0及以上的话,可将compile改为implementation

dependencies {
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.facebook.react:react-native:+'
}

8.接下来在我们的project的build.gradle文件下添加如下语句: [b](注意:是在allprojects{}代码块下添加,而不是在buildscript{}下)[/b]

allprojects {
repositories {
google()
jcenter()
maven {
url "$rootDir/node_modules/react-native/android"
}
}
}

9.在我们的Android项目中的Android Manifest中添加网络权限:

<uses-permission android:name="android.permission.INTERNET"/>

10.添加NDK支持,如果不添加这句话的话,可能会造成关于32位和64位SO库混合引入Crash:

i).在App 的build.gradle中的defaultConfig节点下添加如下语句:

ndk {
abiFilters "armeabi-v7a", "x86"
}

即:

defaultConfig {
applicationId "com.example.lance.myapplication"
minSdkVersion 23
targetSdkVersion 26
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
ndk {
abiFilters "armeabi-v7a", "x86"
}
}

ii).然后在我们project下的gradle.properties文件中的末尾添加如下语句:

android.useDeprecatedNdk=true

iii).在App的build.gradle文件的android节点下添加:

configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

11.完成以上步骤后,React Native就算集成到我们现有的Android项目中,接下来我们用Acti
4000
vity来展示我们的ReactNative:

i).新版本中的ReactNative只需要自定义一个Activity,并将其集成ReactActivity,实现getMainComponentName()方法,在该方法中返回一开始我们注册的ReactNative的名称即可(即跟我们的index.android.js中的AppRegistry中的第一个参数相同),在ReactActivity中,已经帮我们实现了ReactRoot与ReactInstanceManager的配置,在之前的版本中,ReactRoot与ReactInstanceManager需要我们自己去写:

public class MyReactActivity extends ReactActivity {

@Nullable
@Override
protected String getMainComponentName() {
return "application";   //application即注册ReactNative时的名称;
}
}

ii).接下来创建一个MyApplication,并初始化一个ReactNativeHost,该MyApplication继承Application并实现ReactApplication,在源码loadApp方法时,会将当前的Activity的Application强制转换成ReactApplication:

public class MyApplication extends Application implements ReactApplication {

private final ReactNativeHost reactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(new MainReactPackage());
}
};

@Override
public ReactNativeHost getReactNativeHost() {
return reactNativeHost;
}

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this,false);
}
}

12.完成以上步骤后,切换到我们的Terminal窗口,执行npm start命令来启动我们的React Native Server, 如果在这出现错误, 则可以认为我们的项目中没有index.android.bundle这个文件 , 接下来, 我们手动的在app/src/main/目录中添加一个assets目录, 并在该目录下添加一个index.android.bundle文件, 然后手动在该bundle文件中添加内容, 执行以下命令:

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

声明:

1. - -platform : 平台(android/ios)

2. - -dev : 开发模式

3. - -entry-file : 条目文件

4. - -bundle-output : bundle文件生成的目录

5. - -assets-dest : 资源文件生成的目录

13.最后在我们Android项目的Android Manifest文件中, 在application节点添加如下语句:

<application
android:name=".MyApplication">
</application>

最后即可在Android Studio中编译运行我们的Android+React Native程序了





集成时的疑难问题::

i).当我们遇到如下的问题时:



解决方案为:

echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instances
echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
watchman shutdown-server

ii).当我们遇到端口号(例如8081端口)被占用时,我们可以通过如下命令来解决问题:

查看指定端口占用情况: lsof -i :8081

通过杀死PID的方式进行端口释放: kill (PID)

然后再次启动react-native服务即可: npm start