ReactNative学习——集成到原生android项目中

当前ReactNative最新版本是0.36

按照网上一篇文章集成。集成玩之后出现了很多错误，一一解决但是有个错误始终解决不了：

Exception in native call from JS
                                                  com.facebook.react.bridge.JSExecutionException: TypeError: undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach') (http://192.168.1.19:8081/index.android.bundle?platform=android&dev=true&hot=false:7303)
                                                      at com.facebook.react.bridge.ReactBridge.loadScriptFromFile(Native Method)
                                                      at com.facebook.react.bridge.JSBundleLoader$2.loadScript(JSBundleLoader.java:58)
                                                      at com.facebook.react.bridge.CatalystInstanceImpl$2.call(CatalystInstanceImpl.java:146)
                                                      at com.facebook.react.bridge.CatalystInstanceImpl$2.call(CatalystInstanceImpl.java:137)
                                                      at com.facebook.react.bridge.queue.MessageQueueThreadImpl$1.run(MessageQueueThreadImpl.java:73)
                                                      at android.os.Handler.handleCallback(Handler.java:733)
                                                      at android.os.Handler.dispatchMessage(Handler.java:95)
                                                      at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
                                                      at android.os.Looper.loop(Looper.java:136)
                                                      at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:184)
                                                      at java.lang.Thread.run(Thread.java:841).

就这错误 百度 谷歌了两天也没找到答案。后来看到一个人的项目中写的跟上面的集成的代码不一样就从新按步骤来了下 不同的地方按这个项目中的来 最后成功。
本次是在最新的0.36版本下完成。
1、先用AndroidStudio创建一个新项目。RNText。在其根目录中新建一个文件夹命名为android，把剩下的文件全都移到android文件夹下面。
2、在我们Android项目的build.gradle中添加React Native依赖，然后同步，具体代码如下:

compile 'com.facebook.react:react-native:0.36.0'

3、AndroidManifest.xml中加入网络访问权限

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

4、在Android项目的MainActivity中

package com.chs.rntext;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "chs";
    }

}

5、在Android项目的application中

package com.chs.rntext;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class TApplication extends Application implements ReactApplication{

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

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

别忘了在AndroidManifest.xml中配置这个新建的application
6、在项目根目录中执行命令npm init 创建package.json文件
7、在package.json文件中的scripts中添加代码：

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

8、然后在项目根目录下面执行npm install安装依赖模块
其实就是下载node_modules模块

9、配置flow
链接中的文章中是根据curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig来配置的 这个好像是mac中的方法。
我们正常init一个项目中都会有.flowconfig文件 。我是在init的项目中复制过来的。

10、配置maven让它可以加载我们node_modules文件夹中react-native本地最新版本库。
具体修改文件路径:android/build.gradle

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

11、创建我们的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 chs extends React.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('chs', () => chs);

我也是直接在init的一个新项目中复制过来的。不过最后的AppRegistry.registerComponent(‘chs’, () => chs);中的注册的名字要跟MainActivity中的一样跟package.json中的名字也保持一致。
12、然后就可以运行项目了

react-native run-android

OK 出现新项目的欢迎页面。