Mac下搭建ReactNative开发环境一文中讲过了如何搭建环境以及创建一个ReactNative项目,很多时候我们会在原生项目开发中集成ReactNative,我们该怎么做呢?下面我们一步步实现吧。
1.打开终端进入原生项目的根目录,输入
npm init
命令执行的过程中会让你填写一系列的值如下图所示:
npm.jpg
上面name属性填写的是reactnativedemo,最后输入yes结束,最终会在根目录下生成一个package.json文件.
2.下载React和ReactNative文件,在根目录下执行终端命令下载:
npm install --save react react-native
命令结束后会在根目录下创建node_modules目录,并把react和react-native下载到了其中.
3.在根目录创建.flowconfig配置文件,用于约束js代码规范.
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
4.打开第一步中创建的package.json文件，在“scripts”内添加如下语句
"start": "node node_modules/react-native/local-cli/cli.js start"
{
"name": "reactnativedemo",
"version": "1.0.0",
"description": "this is react native demo",
"main": "index.js",
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.6.1",
"react-native": "^0.48.3"
}
}
5.在根目录中新建index.android.js，将下面的代码复制到文件中
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class ReactNativeDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native storm!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('reactnativedemo', () => ReactNativeDemo);
以下的配置参考官网:
6.在app的build.gradle中添加React Native的编译依赖
dependencies {
...
compile "com.facebook.react:react-native:+"
}
- 在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
...
}
这里有可能会报如下错误
Error:Conflict with dependency 'com.google.code.findbugs:jsr305' in project ':app'. Resolved versions for app (3.0.0) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.
解决办法:
android {
....
configurations.all {//app的build.gradle中添加
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
}
8.在AndroidManifest中添加权限和DevSettingsActivity.
<uses-permission android:name="android.permission.INTERNET"/>
//用于显示悬浮窗
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />//在debug时需要
9.创建一个继承自 com.facebook.react.ReactActivity 的 Activity
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
//重写 getMainComponentName() 方法，返回的字符串必须和前面的
// AppRegistry.registerComponent('reactnativedemo', () => ReactNativeDemo);
// 里的 reactnativedemo 对应，表示该 Activity 会显示对应组件里的内容。
@Override
protected String getMainComponentName() {
return "reactnativedemo";
}
}
10.自定义Application 需要实现 com.facebook.react.ReactApplication 接口.
public class MainApplication extends Application implements ReactApplication
{//Application 需要实现 com.facebook.react.ReactApplication
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
// 表示是否启动开发者模式
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
//getPackages() 是引用的模块列表，默认需要添加 MainReactPackage,
//如果需要在 js 里调用原生 Java 模块，需要添加自定义的模块（如 OtherReactPackage）
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
11.在项目的根目录下，运行代码，启动本地服务器
npm start或者react-native start//相当于启动一个本地服务。
运行时crash,报错如下:
java.lang.UnsatisfiedLinkError: dlopen failed: "xxx/libgnustl_shared.so" is 32-bit instead of 64-bit
解决方案:
1、在项目的根目录的 gradle.properties里面添加一行代码:
android.useDeprecatedNdk=true.
2、在project的root目录下的build.gradle中添加如下代码:
defaultConfig {
···
ndk{
abiFilters "armeabi-v7a","x86"
}
packagingOptions {
exclude "lib/arm64-v8a/librealm-jni.so"
}
}
运行时报错连接不上服务器,解决方案如下:
adb reverse tcp:8081 tcp:8081
nom start
最终显示如下:
screen3.png
12.动态调试:
打开应用,摇一摇真机就可开启调试菜单，选择 Dev Settings 进入 DevSettingsActivity
screen2.png
设置 Debug server host & port for device 为本机 IP 地址，添加端口号8081
screen1.png
上面配置好之后,每次修改 js 代码只需摇一摇手机选择 Reload 重新加载就可以，无需重新构建整个 Android 项目，但是修改 Java 代码还是需要重新构建。
下面是我总结的管理react-native版本,便于开发中使用:
$react-native -v:查看RN版本号,如果在项目根目录中输入该命令，查看的是当前项目的版本.
$npm update -g react-native:更新RN版,npm是node packager manager的管理器.
$npm info react-native:查看官网上RN的历史版本和最新版本.
$npm install --save react-native@0.XX.X:升级或者降级本地RN版本,@加上后面的版本号0.XX.X,比如0.48.3版本.
网友评论