android rn设置ip,已有Android项目集成RN

开篇一张图，后面全靠编

1.配置ReactNative的js环境

在Android项目根目录下输入命令npm init (直接在Android studio的terminal命令窗口就行)

我们可以看到init让你生成一个package.json文件，根据实际情况填写的配置参数(也可以从已有的RN项目中拷贝package.json放大Android

项目根目录下)

当前最新rn是0.56，但是运行时有报错，建议使用0.55.4

如果是命令生成的package.json还需要手动添加启动命令，接下来还需要把启动脚本放进去"scripts": {

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

"test": "jest"

},

这样我们就可以时时的调用本地调试服务进行热加载

2.添加ReactNative

接下来我们将React、ReactNative添加到项目中：npm install --save react react-native

完成后会在Android项目中多出一个node_modules文件夹，里面存放了下载好的React 和React Native和根据package.json生成的一些配置(也可以从已有的RN项目中拷贝，但不建议)

3.安装完成之后，我们再去配置.flowconfig，这个是对js代码做约束的，建议配置(也可以不配置)。curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

4.添加ReactNative依赖到Android项目

在app的build.gradle引入以下依赖api "com.facebook.react:react-native:+"

在项目根目录build.gradle添加依赖仓库地址allprojects {

repositories {

…

maven {

// All of React Native (JS, Android binaries) is installed from npm

url "$rootDir/node_modules/react-native/android"

}

}

}

这里maven路径官网上写的是rootDir/../nodemodules/react−native/android，而我们为了方便AS编译，直接放在项目根目录配置RN的，所以这里的路径要改成上面这样

为了防止findbugsbug问题，建议在app/build.gradle中增加下面的代码：android {

//...

configurations.all {

resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'

}

}

5.添加权限

/**设置调试 的权限**/

添加debug模式Activity(正式打包注释掉就好了)

6.添加ReactNative界面

首先我们在Android项目根目录添加index.android.js,这个文件作为RN的入口文件。

(也可以是其他名称，需要在实现ReactApplication接口时重写getJSMainModuleName和getBundleAssetName)

7.添加RN Activity界面

(1).在较老的RN版本中，我们新建一个Activity实现DefaultHardwareBackBtnHandler接口@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

mReactRootView = new ReactRootView(this);

mReactInstanceManager = ReactInstanceManager.builder()

.setApplication(getApplication())

.setBundleAssetName("index.android.bundle")

.setJSMainModuleName("index.android")//对应index.android.js

.addPackage(new MainReactPackage())

.setUseDeveloperSupport(BuildConfig.DEBUG)

.setInitialLifecycleState(LifecycleState.RESUMED)

.build();

// 注意这里的HelloWorld必须对应“index.android.js”中的

// “AppRegistry.registerComponent()”的第一个参数

mReactRootView.startReactApplication(mReactInstanceManager, "ReactNativeDemo", null);

setContentView(mReactRootView);

}

(2).较新的RN版本，例如RN0.55 我们直接继承ReactActivity即可public class ReactNativeDemoActivity extends ReactActivity{

private static final String MAIN_COMPONENT = "ReactNativeDemo";

/** * 返回在index.android.js 中注册的组件名

* @return

*/ @Nullable

@Override

protected String getMainComponentName() {

return MAIN_COMPONENT;

}

}

在原生界面上添加一个入口跳转到ReactNativeDemoActivity即可

实现DefaultHardwareBackBtnHandler接口的方式，可以局部添加RN的组件mAndroidLayout.addView(mReactRootView);

8.自定义的Application实现ReactApplication接口public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

protected boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

@Override protected List getPackages() {

return Arrays.asList( new MainReactPackage());

}

};

@Override

public ReactNativeHost getReactNativeHost() {

return mReactNativeHost;

}

}

9.最后不要忘了在AndroidManifest中添加：

注意需要AppCompat的主题

android:name=".ReactNativeDemoActivity"

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

/>

10.运行项目

1)debug模式，可以不打离线包，实时看到js修改后的效果

先启动服务 npm start

然后直接运行Android项目(注意在RN设置界面绑定电脑的ip端口)

2)release模式

在你打包你的发布版本之前要创建一个bundle文件，这个bundle文件会创建在项目的assets目录中，并且这个文件会包含在你的apk包中，

在你的项目根目录中运行：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/

index.android.js是刚创建的RN界面入口js的名称，后面的输出目录根据自己项目对应修改，例如在项目根目录新建一个bundle目录存放bundle文件，命令就是这样了：react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false