【React Native開發】React Native移植原生Android項目(4)

時間 2019-12-10

標籤 React Native開發 react native 移植原生 android 項目欄目 React 简体版

原文原文鏈接

轉載請標明出處：前端
http://blog.csdn.net/developer_jiangqq/article/details/50519677
java
本文出自:【江清清的博客】node

(一)前言

【好消息】我的站點已經上線執行,後面博客以及技術乾貨等精彩文章會同步更新，請你們關注收藏:http://www.lcode.orgreact

前三節課程咱們已經對於React Native For Android的環境搭建。IDE安裝配置以及應用執行。調試相關的知識點作了解說。今天咱們來說一個很是實用的知識點。android

移植咱們已有的原生Android項目到React Native中。git

剛建立的React Native技術交流3羣(496508742),React Native技術交流4羣(458982758)，請不要反覆加羣！歡迎各位大牛,React Native技術愛好者加入交流!同一時候博客左側歡迎微信掃描關注訂閱號,移動技術乾貨,精彩文章技術推送!github

在React Native中React事實上不少其它關注的是視圖View層。因此React Native自己也支持並且可以讓咱們很是easy方便的移植一個Android原生的項目到React Native中。npm

(二)前提準備工做

①.首先咱們有一個採用Gradle構建的Android應用項目，這個你們直接採用Android Studio進行建立一個項目就能夠。我這邊新建一個文件夾TestHello。而後採用Android Studio建立一個android項目在該文件夾如下。詳細例如如下:json

②.電腦必須安裝Node.js。詳細安裝用法(點擊進入)react-native

(三)Android項目相關配置

2.1 在咱們Android項目的build.gradle中加入React Native依賴，而後同步。詳細代碼例如如下:

compile 'com.facebook.react:react-native:0.17.+'

[注意].該會同步0.17版本號以上的react native，官方的版本號仍是停留在0.13沒有更新，我本地的reactnative是0.17版本號的，因此你們這邊配置必定要跟本身本地的版本號保持一致或者更新。

關於這個問題今天我下午研究了一下去，踩了很是多坑啊~~ 只是ReactNative中文網那邊我已經讓站長更新了版本號。

2.2緊接着咱們需要在項目AndroidManifest.xml中加入網絡訪問權限

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

該只用於開發階段從開發server載入最細的JavaScript代碼，在正式公佈版本號中，假設有需要可以把該網絡權限刪掉。

(四)加入原生代碼

在Android項目的MainActivity中，咱們需要配置相關代碼來進行啓動執行React Native庫。

咱們需要建立ReactRootView，而後在裏邊渲染React引用，並且設置成Activity的主視圖就能夠。

詳細代碼例如如下:

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
    privateReactRootView mReactRootView;
    privateReactInstanceManager mReactInstanceManager;
 
    @Override
    protectedvoid 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, "TestHello",null);
 
       setContentView(mReactRootView);
    }
 
    @Override
    publicvoid invokeDefaultOnBackPressed() {
       super.onBackPressed();
    }
}

注意如下的代碼:

mReactRootView.startReactApplication(mReactInstanceManager,"TestHello", null);

以上當中方法另一種個參數我這邊採用TestHello來進行命名了，注意這個要和後面講到的東西進行統一，詳細咱們繼續往下看。

在React Native中，事實上FB給咱們提供了ReactInstanceManger來替咱們管理Activity相關的生命週期。因此咱們需要傳遞一些Actitivty相關的生命週期到ReactInstanceManger中。詳細代碼onPause()和onResume()方法例如如下:

@Override
    protectedvoid onPause() {
       super.onPause();
 
        if(mReactInstanceManager != null) {
           mReactInstanceManager.onPause();
        }
    }
    @Override
    protectedvoid onResume() {
       super.onResume();
 
        if(mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this,this);
        }
    }

緊接着對於返回button鍵的事件咱們也需要傳遞一下：

@Override
 public void onBackPressed() {
    if(mReactInstanceManager != null) {
       mReactInstanceManager.onBackPressed();
    } else {
       super.onBackPressed();
    }
}

這樣咱們就可以當用戶按下返回鍵的時候，javaScript代碼可以作相關處理。固然假設前端不處理響應的事件。那麼會回調到上面的invokeDefaultOnBackPressed()方法中。繼而回退事件轉移到Activity了，如下就是Activity該怎麼樣執行。就怎麼樣執行了。默認事件就是關閉Activity了

最後一步就是需要處理一下設備菜單了。默認狀況下咱們可以搖晃一下手機來彈出菜單，但是對於模擬器，該方法就不適用了。因此咱們才攔截事件方法進行相關處理一下就能夠。

@Override
public boolean onKeyUp(int keyCode, KeyEvent event){
    if(keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
       mReactInstanceManager.showDevOptionsDialog();
       return true;
    }
    return super.onKeyUp(keyCode, event);
}

到此爲止咱們的Android項目Activity和配置文件以及完畢了最主要的配置方法了。

(五)加入js

如下咱們採用命令行。首先切換到項目的根文件夾上面(個人樣例是切換到TestHello文件夾下)

5.1.命令行執行npm init 執行截圖例如如下:

該命令會建立一個package.json文件。並且提示咱們輸入一些信息，默認不輸入就能夠，只是name必需要爲全英文小寫哦，詳細結果執行結果例如如下:

5.2.命令行執行npm install --save react-native 進行安裝react native模塊以及相關node模塊。執行截圖例如如下:

這裏開始安裝node模塊以及react native模塊，詳細執行結果會生成node_module文件夾例如如下：

5.3.最後執行例如如下命令就能夠:

curl -o .flowconfig  https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

作一下flow配置

以上三步全部完畢了，上面給咱們建立node模塊，而後加入了react-native npm依賴。接下來咱們需要改動package.json文件。在scripts標籤那邊加入例如如下代碼:

"start":"node_modules/react-native/packager/packager.sh"

詳細改動截圖例如如下:

5.4.現在咱們建立一下文件命名爲:index.android.js，而後在裏邊加入例如如下代碼:

'use strict';
var React = require('react-native');
var {
  Text,
  View
} = React;
 
class MyAwesomeApp extends React.Component {
  render() {
    return (
     <View style={styles.container}>
       <Text style={styles.hello}>Hello, World</Text>
     </View>
    )
  }
}
var styles = React.StyleSheet.create({
  container:{
    flex: 1,
    justifyContent:'center',
  },
  hello: {
    fontSize:20,
   textAlign: 'center',
    margin:10,
  },
});
 
React.AppRegistry.registerComponent('TestHello', ()=> TestHello);

以上就完畢了全部的相關代碼以及react-native配置了，注意上面的都採用TestHello了。但願你們都用同樣的名字和前面MainActivity進行統一哦。