安卓开发 第十一篇 初尝 React Native

一.React Native 环境搭建

1. 安装nodejs

   sudo apt-get install  nodejs
   sudo apt-get install npm

2. 安装React Native相关工具

   sudo npm install -g yarn react-native-cli

3. Android 开发环境
   
   • Android Studio 2.0以上
   • JDK 1.8 以上

二.创建第一个React Native项目

选择存放项目的目录，打开终端运行：

react-native init FirstDemo

打开一个模拟器，运行项目：

react-native run-android

如果不出意外，就可以看到运行成功了App界面了，然而作为一名程序员总是免不了要趟坑：could not get batchedbridge make sure your bundle is packaged correctly

解决办法：将项目根目录下面package.json的scripts模块改为：

"scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "bundle-android":"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/" ,
        "test":"jest"   
        }

三.为已有项目接入React Native

在项目根目录初始化工作

npm init

然后会让你填一堆东西，name 必填，其他选填或默认。

在项目根目录安装react native

npm install --save react react-native

打开项目根目录下面的package.json,添加启动脚本到scripts

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

项目根目录添加入口js文件：index.android.js

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

export default class Demo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </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('项目名', () => Demo);

在build.gradle 中添加react native依赖

compile "com.facebook.react:react-native:+"

项目的根目录的build.gradle中的allprojects下添加maven仓库

mavenLocal()

maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }

添加一个activity代理react 界面

public class ReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {

    private static final int OVERLAY_PERMISSION_REQ_CODE =10005 ;
    private ReactRootView rootView;
    private ReactInstanceManager manager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                        Uri.parse("package:" + getPackageName()));
                startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
            }
        }

        rootView = new ReactRootView(this);
        manager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        rootView.startReactApplication(manager, "项目名", null);

        setContentView(rootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {

    }

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

        if (manager != null) {
            manager.onHostResume(this, this);
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (manager != null) {
            manager.onHostPause();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (manager != null) {
            manager.onHostDestroy();
        }
    }

    @Override
    public void onBackPressed() {


        if (manager != null) {
            manager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode==KeyEvent.KEYCODE_MENU&&manager!=null){
            manager.showDevOptionsDialog();

            return true;
        }
        return super.onKeyUp(keyCode, event);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                if (!Settings.canDrawOverlays(this)) {
                    // SYSTEM_ALERT_WINDOW permission not granted...
                }
            }
        }
    }
}

基本工作完成，接下来填坑

坑1：react navite 目前最高支持 android-23

  compileSdkVersion 23
  buildToolsVersion "23.0.1"

坑2：

java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so

解决：指明ndk架构为 armeabi-v7a,x86

defaultConfig {

        ...

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

gradle.properties中添加

android.useDeprecatedNdk=true

坑3：进入React 界面红色，并且提示 Unable to download JS bundle,解决

adb reverse tcp:8081 tcp:8081

坑4：进入React 界面红色，并且提示

RefrenceError:can't find variable __fbBatchedBridge...

解决方法：http://www.lcode.org/referenceerror-cant-find-variable-__fbbatchedbridge%E9%94%99%E8%AF%AF%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/

恩,尝试到此结束,更深入的应用得等到学会JS再说了。

Demo 源码地址：https://github.com/naivor/React-Native-Practice