ReactNative 移植Android项目

来源：互联网发布：php替换删除符号编辑：程序博客网时间：2024/06/06 09:47

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

1.初始化

npm init //初始化，生成package.jsonnpm install --save react react-native //生成node_modulescurl -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专题

0 0