使用本地仓库实现最新版ReactNative集成Android

感谢：
http://www.jianshu.com/p/22aa14664cf9 史上最详细的Android原生APP中添加ReactNative 进行混合开发教程
http://www.tuicool.com/articles/jIVNVvY [原]ReactNative学习——集成到原生android项目中

1、先用AndroidStudio创建一个新项目。在其根目录中新建一个文件夹命名为android，把剩下的文件全都移到android文件夹下面。

2、在我们Android项目的build.gradle中添加React Native依赖，然后同步，具体代码如下:

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

这里可以执行完本地仓库的添加操作后，再进行gradle编译

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

4、在Android项目的MainActivity中(实现点击按钮跳转到rn界面)

public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Button viewById = (Button) findViewById(R.id.gogo);        viewById.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                startActivity(new Intent(MainActivity.this, ReactNativeDemoActivity.class));            }        });    }}

新建一个activity

public class ReactNativeDemoActivity extends ReactActivity {    @Override    protected String getMainComponentName() {        Log.d("leiiiooo", "集成成功");        return "reactandroid";    }}

5、在Android项目的application中

public class DemoApplication 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 getPackages() {            return Arrays.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"

{  "name": "reactandroid",  "version": "1.0.0",  "description": "",  "main": "index.js",  "dependencies": {},  "devDependencies": {},  "scripts": {    "start": "node node_modules/react-native/local-cli/cli.js start"  },  "author": "",  "license": "ISC"}

8、然后在项目根目录下面执行npm install安装依赖模块
其实就是下载node_modules模块(其实这些文件都可以从我们之前安装好的react文件夹直接拷贝过来修改)

npm install --save react react-native

9、配置maven让它可以加载我们node_modules文件夹中react-native本地最新版本库。(修改之后如果compile 'com.facebook.react:react-native:0.36.0' 编译失败，则需要检查：1、仓库的路径是否正确。2、本地安装的react的版本号：npm info react-native)
具体修改文件路径:

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 (                        Welcome to React Native!                  );  }}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('reactandroid', () => chs);

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

12、然后就可以运行项目了

react-native run-android

效果图：

跳转效果图

附：
app gradle：

apply plugin: 'com.android.application'android {    compileSdkVersion 25    buildToolsVersion "25.0.0"    defaultConfig {        applicationId "com.dotc.supobattery.notification.reactandroid"        minSdkVersion 16        targetSdkVersion 25        versionCode 1        versionName "1.0"        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"    }    buildTypes {        release {            minifyEnabled false            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'        }    }    configurations.all {        resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'    }}dependencies {    compile fileTree(dir: 'libs', include: ['*.jar'])    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {        exclude group: 'com.android.support', module: 'support-annotations'    })    compile 'com.android.support:appcompat-v7:25.0.0'    testCompile 'junit:junit:4.12'    compile 'com.facebook.react:react-native:0.36.0'}

项目gradle：

// Top-level build file where you can add configuration options common to all sub-projects/modules.buildscript {    repositories {        jcenter()    }    dependencies {        classpath 'com.android.tools.build:gradle:2.2.2'        // NOTE: Do not place your application dependencies here; they belong        // in the individual module build.gradle files    }}allprojects {    repositories {        jcenter()        maven {            url "$projectDir/../../node_modules/react-native/android"        }    }}task clean(type: Delete) {    delete rootProject.buildDir}

更多相关文章

随机推荐