如何在原有Android項目中快速集成React Native詳解
前言
RN經(jīng)過一段時間發(fā)展，已經(jīng)有充分數(shù)量的人嘗試過了，就我身邊就有幾批，褒貶也不一：
① 做UI快
② 還是有很多限制，不如原生Native
③ 入門簡單，能讓前端快速開發(fā)App
④ iOS&Android大部分代碼通用
⑤ code-push能做熱更新，但是用不好依舊坑
......
在得到一些信息后，可以看出，要用RN高效率的做出比較不錯的App是有可能的，單看投入度與最初設計是否合理，而且現(xiàn)在關于React Native的各種文檔是相當豐富的，所以這個階段想切入RN可能是一個不錯的選擇。
眾所周知對于現(xiàn)有的大多數(shù)項目來說都不是從頭構(gòu)建的，而要在原有項目的基礎上引入React Native則肯定和用react-native init xxx創(chuàng)建工程不同。因此下面就來說下具體操作。不過在真正開始之前還是要先說明一下工具配置。
- NodeJS：選擇對應的系統(tǒng)下載并安裝，安裝完即可在終端運行npm 命令。
- 配置源，眾所周知因為墻的原因，所以最好配置國內(nèi)的源。
配置方法如下：
npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global
1.加入package.json文件以及index.android.js文件
一般地，我們可以在項目根目錄下創(chuàng)建package.json文件以及index.android.js文件。
package.json文件類似與Android中的build.gradle文件，在其中主要配置了React Native所需的依賴庫以及一些腳本語句。以下的代碼可以看作是一個package.json文件的模版,版本號可以根據(jù)需要而定。
{
"name": "XXX",
"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",
"react-native": "0.50.3",
"react-native-device-info": "^0.12.1"
},
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "21.2.1",
"react-test-renderer": "16.0.0"
},
"jest": {
"preset": "react-native"
}
}
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);
然后，在該目錄下打開終端，運行 npm i 命令，安裝React Native 所需的依賴，安裝完成后會在根目錄下創(chuàng)建node_modules文件夾，下載的依賴就在這個文件夾下。到此，第一步的工作已經(jīng)完成了。
-----分割線------
實際上我們不會將RN代碼放到Android工程里，因為在一般的公司項目中，使用SVN或者Git進行管理，客戶端目錄下一般都會有Android和iOS兩個目錄區(qū)分兩個端。而React Native作為一個跨平臺的框架，放在Android或者iOS目錄里都不太合適。因此個人認為比較好的做法是在Android和iOS同級目錄創(chuàng)建一個ReactNative目錄，放置RN項目的代碼。因此目錄結(jié)構(gòu)大致如下：
. ├──Android ├──trunk ├──branches └──tags ├──iOS ├──trunk ├──branches └──tags └──ReactNative ├──trunk ├──branches └──tags
此時，RN項目的代碼包括package.json文件以及index.android.js文件都是在trunk目錄下，自然地，需要在trunk目錄打開終端，運行運行 npm i 命令，安裝React Native 所需的依賴，而node_modules文件夾也自然會在該文件夾內(nèi)創(chuàng)建。
2.在Android項目中配置ReactNative依賴
對于package.json文件在Android 工程中的情況
首先編輯在項目目錄下build.gradle文件。
allprojects {
repositories {
google()
jcenter()
//添加這個倉庫
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
}
然后在編輯app目錄下的build.gradle文件，添加React Native依賴。
implementation 'com.facebook.react:react-native:0.50.3'
注意：該版本號需要與package.json文件中配置的RN版本號保持一致。
之所以需要在項目的build.gradle文件中添加maven配置，是因為Android項目默認的依賴包的源jcenter()并不包含最新版的React Native（它只到0.20.1）。
對ReactNative獨立目錄情況
與第一種情況并無太大區(qū)別，只是RN的maven倉庫路徑有所不同。因為通過版本控制拉取下來的工程位置各有不同，為了避免開發(fā)人員對項目目錄下的build.gradle文件編輯沖突，推薦使用如下方式：
//加載local.properties配置
Properties properties = new Properties()
InputStream inputStream = project.rootProject.file('local.properties').newDataInputStream();
properties.load(inputStream)
allprojects {
repositories {
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url properties.getProperty('reactnative.dir')
}
}
}
其中l(wèi)ocal.properties文件不需要提交版本控制，并在其中添加一個reactnative.dir屬性，屬性值為RN的android工程目錄路徑，例如在我的項目中
reactnative.dir=/Users/littlebyte/svn/ReactNative/ReactNative/node_modules/react-native/android
3.創(chuàng)建RN視圖承載的Activity或Fragment
創(chuàng)建RN視圖承載的Activity
public class MyReactActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
//該返回值需要與N程序的入口文件index.android.js中的注冊的名字相同
return "XXX";
}
}
創(chuàng)建RN視圖承載的Fragment
與Activity不同,在Fragment中加載RN有點不一樣。但在Android中加載RN，無論是在Activity還是Fragment，加載的都只是一個View而已。而給Fragment設置View，只需要Fragment的onCreateView返回RN的View即可。代碼如下：
public class MyFragment extends Fragment {
public static final String COMPONENT_NAME = "MyFragment";
private ReactRootView mReactRootView;
@Override
public void onAttach(Context context) {
super.onAttach(context);
mReactRootView = new ReactRootView(context);
mReactRootView.startReactApplication(
getReactNativeHost().getReactInstanceManager(),
COMPONENT_NAME,
null);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
return mReactRootView;
}
@Override
public void onDestroy() {
super.onDestroy();
if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
mReactRootView = null;
}
if (getReactNativeHost().hasInstance()) {
getReactNativeHost().getReactInstanceManager().onHostDestroy(getActivity()
);
}
}
protected ReactNativeHost getReactNativeHost() {
return ((ReactApplication) getActivity().getApplication()).getReactNativeHost();
}
public ReactInstanceManager getReactInstanceManager() {
return getReactNativeHost().getReactInstanceManager();
}
}
而后Fragment該怎么用就怎么用。
4.修改Application
修改自定義的 Application ，實現(xiàn) ReactApplication 接口。
public class MainApplication extends Application implements ReactApplication {
public final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
5.修改Application，添加相應的權(quán)限以及Activity聲明
RN需要添加以下權(quán)限：
<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
除了聲明自定義的Activity，還需要添加DevSettingsActivity，用來修改RN的相關設置。
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
至此，Android原生項目集成RN的工作就基本完成了。
6.調(diào)試
要調(diào)試首先需要啟動RN的本地服務器。在package.json文件所在目錄打開終端，運行react-native start命令即可啟動本地服務器。然后安裝并運行App。
如果使用模擬器調(diào)試則可以直接運行打開RN的頁面，而如果使用真機調(diào)試還需要搖一搖彈出設置菜單，點擊Dev Settings，設置Debug server host&port for device,填入你電腦的ip:8081即可。
之后就可以愉快的調(diào)試運行了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
Android中HorizontalScrollView使用方法詳解
這篇文章主要為大家詳細介紹了Android中HorizontalScrollView使用方法，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了android 視頻圖片混合輪播實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Android獲取設備CPU核數(shù)、時鐘頻率以及內(nèi)存大小的方法
這篇文章主要介紹了Android獲取設備CPU核數(shù)、時鐘頻率以及內(nèi)存大小的方法,涉及Android針對系統(tǒng)硬件相關操作技巧,需要的朋友可以參考下2016-07-07
Android自定義收音機搜臺控件RadioRulerView
這篇文章主要為大家詳細介紹了Android自定義收音機搜臺控件RadioRulerView的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
最近的一個項目需要實現(xiàn)需求，希望從一個View上調(diào)用輸入法和接收輸入法傳過來的內(nèi)容，下面這篇文章就給大家分享下Android自定義View接收輸入法輸入的內(nèi)容的方法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要介紹了Android編程實現(xiàn)自定義手勢的方法,結(jié)合實例形式分析了Android自定義手勢的功能、相關函數(shù)與具體實現(xiàn)步驟,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細介紹了Android高仿微信5.2.1主界面及消息提醒,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
Android屏幕旋轉(zhuǎn)之橫屏豎屏切換的實現(xiàn)
這篇文章主要介紹了Android屏幕旋轉(zhuǎn)之橫屏豎屏切換的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Android GSYVideoPlayer視頻播放器功能的實現(xiàn)
這篇文章主要介紹了Android GSYVideoPlayer視頻播放器功能的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
這篇文章主要為大家詳細介紹了Android實現(xiàn)多張圖片合成加載動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07