Android Studio集成React native

前言

• 本文基于React native 0.44.3

开始

1、创建package.json文件，配置类似如下（具体自己修改）

{
    "name": "ReactHome",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "^16.0.0-alpha.6",
        "react-native": "^0.44.3",
        "react-native-update": "^4.0.6"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "2.1.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0-alpha.6"
    },
    "jest": {
        "preset": "react-native"
    }
}

• PS：可以使用 npm init 来创建package.json

2、使用命令 npm install 来创建node_modules文件

3、创建index.android.js 文件是RN程序的入口文件。例子index.android.js 文件如下：

import React,{Component} from 'react';
import {
 AppRegistry,View,Text,
} from 'react-native';
 
class App extends Component{
 //...其他方法
 render(){
  return(
   
    this is React Native Page
   
  );
 }
  //...其他方法
}
AppRegistry.registerComponent('XXX', () => App);

4、在build.gradle

image.png

image.png

• 即-->

allprojects {
    repositories {

        jcenter()

        maven {

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


    }

    configurations.all {

        resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'
    }
}

5、在app里面的build.grade

image.png

image.png

• 即-->

//最后的+代表为最新版本
//此处我使用
compile 'com.facebook.react:react-native:0.44.3'

6、创建ReactActivity显示，大致如下

public class MyReactActivity extends ReactActivity {



    /*
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {

        return "ReactHome";

    }


    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {

        return new MyReactDelegate(this,getMainComponentName());

    }


    //自定义MyReactDelegate
    class  MyReactDelegate extends ReactActivityDelegate {


        public MyReactDelegate(Activity activity, @javax.annotation.Nullable String mainComponentName) {

            super(activity, mainComponentName);

        }


        @Override
        protected Bundle getLaunchOptions() {

            Bundle bundle = new Bundle();
            bundle.putString("token", MyApp.getInstance().token);
            return bundle;

        }
    }
    /**
     * 序列化map供Bundle传递map使用
     */
    public class SerializableMap extends HashMap implements Serializable {



    }

}

7、创建实现ReactApplication接口的MyApp,大致如下

package com.devil.reactnativetest;


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.io.File;

import java.util.Arrays;

import java.util.List;


/**
 * Created by Devil on 2018/2/5.
 */
public class MyApp extends Application implements ReactApplication{
    
    //以下配置react-native
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        
        
        @Override
        public boolean getUseDeveloperSupport() {
            
            return BuildConfig.DEBUG;
            
        }
        //如果本地保存的路径不存在JSBundle，则会加载assets中的JSBundle
        
        @Override
        protected String getJSBundleFile() {
            File bundleFile = new File("JSBundle的在SD卡位置");
           if(bundleFile.exists()){
               
               return bundleFile.getAbsolutePath();
               
           }
           
           return super.getJSBundleFile();
           
           }
        
        
           @Override
           protected List getPackages() {
               
               return Arrays.asList(new MainReactPackage());
               
           }
        
       };

       @Override
       public ReactNativeHost getReactNativeHost() {
           
           return mReactNativeHost;
           
       }
    
}

8、AndroidManifest.xml中要设置权限

//网络权限

//如果需要debug 加上