前言：前端時間隨著自己的學習和研究，也寫了幾篇關於react native的文章，雖然都是比較簡的，但是都是根據自己的效果來做的流程，所以還是比較實用的，可以避免很多的坑。這篇react native與原生的互動也是很簡單的實現，但是本人也是踩了很多的大坑才跳了出來實現了想要的效果。

囉嗦一下：這篇文章我打算作為自己學習react native的終篇了，以後應該不會再專門寫這種怎麼學習和使用RN的文章了，因為以後的react native的開發都是語法細節和專案的具體實現了，不適合寫部落格了。當然，如果裡面的某些大坑或者實用的小東西還是會寫出來讓大家看看吧，也許一不小心就幫助了需要的夥伴呢。

好了，囉嗦結束了，開始今天的乾貨了。。。

請注意了：本篇文章是基於上篇部落格我已經執行起來了我的react native 專案的hello world 效果延續下來的。由於RN的侷限性，企業級的專案開發不可能會是隻有react native來做，所以基本都是混合開發，我的該篇文章也是朝著混合開發去的。。。

該篇概括：這次學習reactnative 我是從修改js和activity的類的程式碼開始，然後到最後的打包專案的apk可以執行實現效果流程做的，所以一下內容我也是會按照這個流程來寫，主要目的是讓大家從感性上知道RN開發的流程性和RN以及到底該怎麼去使用RN，細節語法等方面我不會太關注，如果需要請檢視相關的其他的文章。

首先：說明一下react native 的混合開發的實現方式。

1.自己建立Android studio專案，然後按照步驟將RN需要的檔案用命令給匯入到專案裡，再配置專案對RN的各種依賴和在build.gradle檔案做一些配置。

這個方式需要怎麼去做，很多文章都是寫的有，可以去看。

2.通過react native init 出來的RN 專案，在裡面的android專案下做開發，此時在rn專案的根目錄需要的檔案都已經自動生成了，同時該Android專案裡面各種配置也都自動給配置好了，你是不需要操心這些了。

友情提示：如果是已經有了自己的Androidstudio專案的同學，可以將自己的專案替換掉rn裡面的android專案，這也是可以的，然後將原來的rn專案裡面自帶的android專案的build.gradle檔案的配置給複製到你的專案就好了。

我自己就是基於第二種方式來做的RN和原生的混合開發！！！

以下流程是按照我的的習慣和學習的 步驟來寫的，如果和你習慣的順序不一樣，可以根據標題自己跳著看就好。

一：簡單說一下packager服務的啟動。（也就是js的後臺服務）

在初始化react native專案的時候，官方文件是讓啟動了packager服務，然後你修改的js的程式碼在手機就可以看到效果了。

這個服務的作用就是將你修改的js程式碼實時的打包到伺服器，然後你的app從伺服器那裡拉去最新的js程式碼來顯示，有利於提高專案開發除錯的效率。

這個時候我在考慮，如果專案打包釋出了，這個服務怎麼辦，所以學習了以後才發現該服務不是必須的，因為最終你的apk是要從自己的專案本地載入js程式碼的，所以該服務是開發提高效率的工具，不是RN開發必須的！！！

既然apk最終是從本地載入的js檔案，那麼寫的那些js檔案怎麼匯入到專案裡面的呢？？請看下面的內容

二：將js檔案打包放入到Android專案。

我一開始迷惑的是隨著js檔案的增多，都是一個一個的打包到專案裡面嗎？？後來發現不是這樣的，只需要把入口js檔案打包到專案裡面就可以了，這樣其他的js檔案都是不用管了，專案執行完全沒有問題。這個入口js檔案就是 index.android.js 檔案。（為什麼只需匯入它就好了，我沒有深入的研究，誰有興趣可以研究一下RN的原理。）

匯入命令是：（在rn的專案的根目錄執行這個cmd命令）

react-nativebundle--platformandroid--devfalse--entry-fileindex.android.js--bundle-outputandroid/app/src/main/assets/index.android.bundle--assets-destandroid/app/src/main/res/

對命令做一個簡單的說明：

將bundle檔案打包到asset是目錄下後（沒有該目錄，就手動建立一個），即使packager服務沒有開啟，你執行app起來也可正常的顯示js的頁面了。

即使你簽名打包apk去釋出市場也是完全ok的！！

在此提示：每次修改了任何的js檔案，只要把index.android.js檔案重新打包為bundle檔案到專案就可以了，再執行就是新的修改後的頁面了。

到了現在，react native怎麼匯入到專案裡進行開發，怎麼打包含有react native的apk釋出出去，都已經沒問題了，接下來就是怎麼做原生和RN的互動了。

三：原生與RN的互動。

我這演示的是怎麼將原生的activity啟動react native 頁面時把值給傳遞過去，從而根據activity傳過來的不同的值顯示不同的頁面效果。

首先給出程式碼，就可以清晰的看到怎麼將activity的值給RN頁面傳遞過去。

public class MainActivity extends ReactActivity {
    @Nullable
    @Override
protected String getMainComponentName() {
        return "MyReactNativeApp";
}

    @Override
protected ReactActivityDelegate createReactActivityDelegate() {
        return new MyReactDelegate(this,getMainComponentName());
}
    class MyReactDelegate extends ReactActivityDelegate{

        public MyReactDelegate(Activity activity, @Nullable String mainComponentName) {
            super(activity, mainComponentName);
}

        @Nullable
        @Override
protected Bundle getLaunchOptions() {
            Bundle bundle=new Bundle();
bundle.putString("aaa",getIntent().getStringExtra("key"));//注 key 是關鍵字 js會過濾掉  這個是大坑
return bundle;
}
    }
}

對程式碼簡單的解釋一下：

protected String getMainComponentName() {
        return "MyReactNativeApp";
}

實現方式的註釋：該傳值的方式是通過重寫ReactActivityDelegate然後覆蓋getLaunchOptions方法完成的（如果不理解這種方式，請檢視其他的介紹文件）

大坑提醒：bundle進行put值得時候不能用 key  作為健，js會給遮蔽掉，這樣在js裡面就是獲取不到這個值了！！（這個坑我在裡面苦逼了好久）

傳進去的的值給寫好了，下面就好看怎麼接收這個值了。

上程式碼：

import { AppRegistry } from 'react-native';
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';


export default class Index extends Component<{}> {
  render() {
if('1'===this.props.aaa){
            return (
                    <View style={styles.container}>
                           <Text style={styles.welcome}>
                                         say hello world first {this.props.aaa}
                          </Text>      
                   </View>
                     );
         }else{
          return (
                  <View style={styles.container}>
                        <Text style={styles.welcome}>
                               say hello world two  {this.props.aaa}
                       </Text>      
                  </View>
                   );
           }
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('MyReactNativeApp', () => Index);

這個就是我的js入口檔案的程式碼，通過這個{this.props.aaa}屬性 的方式來接收傳進來的值，（如果不懂什麼是屬性，請看相關的文件介紹）這樣就可以通過判斷不同的值來做不同的處理邏輯，實現不同的頁面效果。

好了，到此為止，我對react native不在那麼迷茫了，不會再搞不清楚它到底是什麼了，由小白升級為菜鳥了，希望自己可以儘快的成為rn的老司機。

還在react native 的火海里掙扎的同志們，對你們說 see  you   了