前言
- 本文基于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(
<View>
<Text>this is React Native Page</Text>
</View>
);
}
//...其他方法
}
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<K,V> extends HashMap<K,V> 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<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(new MainReactPackage());
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
8、AndroidManifest.xml中要设置权限
//网络权限
<uses-permission android:name="android.permission.INTERNET" />
//如果需要debug 加上
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
