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下功能.重新编译下工程,启动服务器运行
网友评论