ReactNative 移植Android项目

新建Android项目进行测试。
示例在：ReactNativeModule

1.初始化

npm init //初始化，生成package.json
npm install --save react react-native //生成node_modules
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig //生成.flowconfig

在package.json文件中在scripts块中添加
"start": "node node_modules/react-native/local-cli/cli.js start"

2.创建index.android.js文件，添加到根目录中

  'use strict'; 
import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
/**/
class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
/*
  该Component的Name叫HelloWorld，之后在Activity中也是这个名
*/
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

3.在app目录下的build.gradle中添加React Native依赖和ndk过滤

    compile('com.facebook.react:react-native:+') {
        exclude group:'com.android.support' //去除相同的依赖，这块需要测试，因为项目中已经有更新的support依赖
    }

    defaultConfig {
        // ...
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

4.在根目录下的build.gradle中添加maven本地库：

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

5.添加对应的Activity，继承ReactActivity

public class ReactContainerActivity extends ReactActivity{
    @Nullable @Override protected String getMainComponentName() {
        return "HelloWorld"; //名称和index.android.js中的名称一样
    }
}

6.添加MainApplication，实现ReactApplication

public class MainApplication extends Application implements ReactApplication {

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

        @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);
    }
}

7.配置manifest文件

//添加权限
<uses-permission android:name="android.permission.INTERNET"/>
<application
    android:name=".MainApplication"
    ...>
    //添加Activity
    <activity android:name=".ReactContainerActivity"/>
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
</application>

8.run Application
1. 真机调试时adb reverse tcp:8081 tcp:8081
2. 在该项目下在terminal中npm start开启服务器
3. 直接使用Android Studio run Application，进入页面后观察服务器日志，等待一会就能加载该js页面

这个过程中更多的参考初始化的AwesomeProject，项目结构很相似，可以照着来。

参考：
4.1.React Native移植原生Android项目-已更新版本-New
Integration With Existing Apps

其中：

GitHub：react-native
react-native官方介绍文档
 江清清ReactNative专题

ReactNative 移植Android项目

猜你喜欢