ReactNative Android

1.Mac系统,Android-Studo2.2.3,ReactNative0.40
2.必须要先成功运行HelloWorld工程,node_modules和package.json

3.创建安装项目名称'LaiHH',选中最低兼容16,android 4.1版本,创建一个Empty Activity空项目

4.对应目录结构如下

Paste_Image.png

5.build.gradle加上代码

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()
        //原生Android集成ReactNative需要增加
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

6.build.gradle加上代码(2个文件不一样的,对应的加上)

apply plugin: 'com.android.application'
android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    defaultConfig {
        applicationId "com.example.laihuihuang.laihh"
        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'
        }
    }
}

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.1.0'
    testCompile 'junit:junit:4.12'


    compile 'com.facebook.react:react-native:+'//ReactNative组件
    compile project(':react-native-image-picker')//相册选择
    compile project(':react-native-image-crop-picker')//相册选中
    compile project(':react-native-smart-pull-to-refresh-listview')//下拉刷新
    compile project(':react-native-picker')//选择器
//    compile project(':imagepickerModule')
//    compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.3'  //optional
//    compile 'com.github.bumptech.glide:glide:3.6.1'   //optional
//    compile 'com.squareup.picasso:picasso:2.4.0'   //optional
}

7.settings.gradle加上自己常用的第三方组件

rootProject.name = 'LaiHH'
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
include ':react-native-image-crop-picker'
project(':react-native-image-crop-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-crop-picker/android')
include ':react-native-smart-pull-to-refresh-listview'
project(':react-native-smart-pull-to-refresh-listview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-pull-to-refresh-listview/android')
include ':react-native-picker'
project(':react-native-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-picker/android')


//include ':imagepickerModule'
//project(':imagepickerModule').projectDir = new File(rootProject.projectDir, '../node_modules/imagepickerModule')

include ':app'

8.创建全局对象MainApplication

package com.example.laihuihuang.laihh;

import android.app.Application;
import android.util.Log;

import com.imagepicker.ImagePickerPackage;//相册选择
import com.beefe.picker.PickerViewPackage;//选择器
import com.reactnative.ivpusic.imagepicker.PickerPackage;//相册多选
import com.reactnativecomponent.swiperefreshlayout.RCTSwipeRefreshLayoutPackage;//下拉刷新

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
  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(),
            new PickerPackage(),//单选
            new RCTSwipeRefreshLayoutPackage(),//下拉刷新
            new PickerViewPackage(),  //选中数字
               new ImagePickerPackage() //相册
      );
    }
  };
  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

9.创建RNActivity

package com.example.laihuihuang.laihh;

import android.os.Bundle;
import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.widget.RelativeLayout;
import android.view.KeyEvent;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.shell.MainReactPackage;

import com.imagepicker.ImagePickerPackage;
import com.beefe.picker.*;
import com.reactnative.ivpusic.imagepicker.*;
import com.reactnativecomponent.swiperefreshlayout.*;

public class RNActivity extends ReactActivity {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

//        mReactRootView = new ReactRootView(this);
//        mReactInstanceManager = ReactInstanceManager.builder()
//                .setApplication(getApplication())
//                .setBundleAssetName("index.android.bundle")
//                .setJSMainModuleName("index.android")
//                .addPackage(new MainReactPackage())
//                .addPackage(new PickerViewPackage())
//                .addPackage(new ImagePickerPackage())
//                .addPackage(new RCTSwipeRefreshLayoutPackage())
//                .addPackage(new PickerPackage())
//                .setUseDeveloperSupport(BuildConfig.DEBUG)
//                .setInitialLifecycleState(LifecycleState.RESUMED)
//                        //.setUseOldBridge(true) // uncomment this line if your app crashes
//                .build();
//        mReactRootView.startReactApplication(mReactInstanceManager, "LaiHH", null);//这里名字要对应你的项目
//        setContentView(mReactRootView);
    }

    @Override
    protected String getMainComponentName() {
        return "LaiHH"; // 你的项目的名字
    }
    
}

10.编辑activity_rn.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:id="@+id/test_r"
    tools:context="com.example.laihuihuang.laihh.RNActivity">



    <com.facebook.react.ReactRootView
        android:id="@+id/test_js"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
      />


</RelativeLayout>

11.增加权限以及设置全局对象 android:name=".MainApplication"

   <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.laihuihuang.laihh">


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

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.CAMERA" />

    
    <application
        android:name=".MainApplication"  
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".RNActivity"/>
    </application>

</manifest>

12.编辑activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.laihuihuang.laihh.MainActivity">

    <Button
        android:text="点击我跳转到ReactNative"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/button" />
</RelativeLayout>

13.编辑MainActivity

package com.example.laihuihuang.laihh;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.content.Intent;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, RNActivity.class);//传入上下文,和要跳转的界面
                startActivity(intent);
            }
        });

    }
}

14.最好clean下功能.重新编译下工程,启动服务器运行