android原生項目整合ReactNative

2019-11-09 17:49:08

字體：大中小

來源：轉載

供稿：網友

android原生項目整合ReactNative

1、配置環境

1.1、使用Android Studio創建Android原生項目

1.2、安裝node.js

1.3、在項目根目錄使用npm init命令創建package.json

注意項目名稱要與將來android加載RN名稱一致

1.4、使用npm install -save react，npm install -save react-native下載源文件

1.5、使用如下命令：

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 在android根目錄下生成.flowconfig文件作用于flow主要用來做靜態代碼檢查。

1.6、在package.json文件的scripts屬性添加

“start”: “node node_modules/react-native/local-cli/cli.js start”

1.7、配置Android項目react-native依賴庫

compile”com.facebook.react:react-native:+”，（+號代表使用最新版本）

1.8、添加ndk支持

ndk { abiFilters "armeabi", "armeabi-v7a", "x86", "mips"}

1.9、添加Gradle強制依賴解析策略

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

Gradle配置

1.10、配置React-Native本地代碼路徑

在項目的根目錄下的build.gradle中修改項目Gradle配置

1.11、在項目根目錄下創建index.android.js文件

import React,{Component} from 'react';import { ApPRegistry, StyleSheet, Text, View} from 'react-native';class HelloWorld extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}>這是React-Native組件</Text> </View> ) }}var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor:'#ccc', }, hello: { fontSize: 20, color: '#fff', textAlign: 'center', margin: 10, },});//注意這里的rnapp哦AppRegistry.registerComponent('rnapp', () => HelloWorld);

2、使用Android原生Activity

2.1、在android原生項目下重新新建一個Activity類

public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler{ 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()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication(mReactInstanceManager,"",null); setContentView(mReactRootView); } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } @Override protected void onResume() { super.onResume(); if(mReactInstanceManager!=null){ mReactInstanceManager.onHostResume(this,this); } } @Override protected void onPause() { super.onPause(); if(mReactInstanceManager!=null){ mReactInstanceManager.onHostPause(this); } } @Override protected void onDestroy() { super.onDestroy(); if(mReactInstanceManager!=null){ mReactInstanceManager.onHostDestroy(this); } } @Override public void onBackPressed() { if(mReactInstanceManager!=null){ mReactInstanceManager.onBackPressed(); }else { super.onBackPressed(); } } @Override public boolean onKeyUp(int keyCode, KeyEvent event) { if(keyCode==KeyEvent.KEYCODE_MENU&&mReactInstanceManager!=null){ mReactInstanceManager.showDevOptionsDialog(); return true; } return super.onKeyUp(keyCode, event); }}

2.2、修改AndroidManifest.xml配置文件

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.taiji.rntest"> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> <uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/A2.3、通過cmd命令react-native start運行服務

這里寫圖片描述