React Native & Android集成

在一个现有的APP里集成ReactNative. 都是杂碎时间搞的,写的流程有些乱。。。。

1. 新建一个项目

在Android studio 里直接创建一个空工程(这里方便测试可以先把项目的目录改成android), 在app的依赖里面添加React Native的依赖:

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

然后在AndroidManifest.xml加入访问网络权限:

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

为了让项目支持调试RN,需要在AndroidManifest.xml里面加入RN的DevSettingsActivity,如下:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

由于ReactNative的minSdkVersion为16,所以有可能需要在Manifest里添加:

<uses-sdk tools:overrideLibrary="com.facebook.react" />

修改MainActivity,如下:

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler{

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @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")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this, this);
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }

}

setBundleAssetName先不用管。后面离线打包的时候会用到。
PS:其实可以认为是ReactNative提供了一个FrameLayout。这样就很容易理解了。

在工程上一级目录下执行npm init,指定name等属性,自动创建package.json文件。
在工程上一级目录下新建一个index.android.js文件:

'use strict';

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

class ReactNativeProject extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
        <Text>我来自ReactNative</Text>
      </View>
    )
  }
}
var styles = React.StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

React.AppRegistry.registerComponent('HelloWorld', () => ReactNativeProject);

在项目上一级目录执行npm install --save react-native,这条命令会在目录下生成node_modules文件夹并添加react-native的npm依赖(千万不要用cnpm, 唉说多了都是泪。。。)。

在项目上一级目录下执行:

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

在上面生成的package.json中的scripts里面添加一行:

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

例如:

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "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-native": "^0.39.2"
  }
}

code目录

首先启动RN的npm本地服务:

react-native run-android

然后运行就可以了。。。

经试验 如果Android项目的目录名字不是android的话,会提示没有找到Android工程Android project not found. Maybe run react-native android first? .这时候只能先执行react-native startadb reverse tcp:8081 tcp:8081, 然后使用Android studio run(或者./gradlew assembleDebug)安装在手机。以后更新摇一摇手机reload一下就OK了,同样不需要再编译apk了。

如果需要在Android studio里面来安装的话,就会提示”Could not get BatchedBridge….”, 即RN找不到要加载的包,需要手动执行:

react-native start
adb reverse tcp:8081 tcp:8081

react-native start
adb reverse tcp:8081 tcp:8081

关于离线打包:

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

一条命令就可以打包到指定的目录,就不需要在依赖于服务端了
React Native 优先请求服务端(localhost)的连接,否则去assets里面找,如果还是没有找到才会报错。

关于代码结构的优化

在Native + RN的混合工程中,希望写的代码都在Android项目目录下,比较好维护。就是说要把index.android.js等自己写的js还有资源放在Android工程目录下。关于node_modules目录,如果也放在Android工程下,由于文件太多,AS都能卡死掉,,,所以想要的目录节后为:

├── node_modules  
├── android_proj 
│   ├── app  
│   │   ├── build..  
│   │   ├── src..  
│   │   └── build.gradle  
│   ├── index.android.js  
│   ├── rnjs..  

调整成这样的目录后,使用`react-native start 启动服务,手机上提示404,RN的packager在默认的目录中没有找到入口js文件。在启动服务时需要添加一个目录。

react-native start --root android_proj

link=>
https://www.zhangningning.com.cn/blog/Android/android_react_native.html

RNPolymerPo 是一个基于 React Native 的生活类聚合实战项目,目前由于没有 MAC 设备,所以没有适配 iOS,感兴趣的可以自行适配 app 目录下相关 JS 代码即可。 获取代码与编译调试打包 如下所有步骤及说明均为 React Native Android 的 DIY,涉及命令均为 Ubuntu 环境,Windows 类推即可。 1. 获取代码及模块安装和签名配置 执行如下命令进行代码下载及模块安装: $ git clone https://github.com/yanbober/RNPolymerPo.git $ cd RNPolymerPo $ npm install //如果觉得慢可以先切换到国内 npm 镜像源再执行此命令 配置 Gradle 个人签名路径及属性: //1. 把你个人的签名 my-release-key.keystore 文件(不知道如何生成请自行搜索)放到 RNPolymerPo 工程的 android/app 文件夹下。 //2. 编辑工程的 gradle.properties 文件,添加如下的代码(注意把其中的****替换为你自己相应密码)。 MYAPP_RELEASE_STORE_FILE=my-release-key.keystore MYAPP_RELEASE_KEY_ALIAS=my-key-alias MYAPP_RELEASE_STORE_PASSWORD=***** MYAPP_RELEASE_KEY_PASSWORD=***** 2. 编译打包 APK 文件 编译生成在线快速调试 Debug 开发包,执行如下命令: $ adb reverse tcp:8081 tcp:8081 $ react-native start //开启本地 JS 服务 $ react-native run-android //终端的 RNPolymerPo 目录下执行 编译生成 release 包,执行如下命令: $ cd android && ./gradlew assembleRelease 拓展规划 下一个版本准备做的事情: 兼容性处理; 夜间模式; 热修复及 PHP 服务端编写; 多语言切换等问题评估;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值