 |
| Facebook Open Source React Native |
與現有應用程序集成
當您從頭開始新的移動應用程序時，React Native非常棒。但是，它也適用於向現有本機應用程序添加單個視圖或用戶流。只需幾個步驟，您就可以添加基於React Native的新功能，屏幕，視圖等。
具體步驟因您要定位的平台而異。
具體步驟因您要定位的平台而異。
Android (Java) 為例
關鍵概念
將React Native組件集成到Android應用程序中的關鍵是：
- 設置React Native依賴項和目錄結構。
- 用JavaScript開發React Native組件。
- 將ReactRootView添加到您的Android應用。此視圖將用作React Native組件的容器。
- 啟動React Native服務器並運行本機應用程序。
- 驗證應用程序的React Native方面是否按預期工作。
先決條件
按照使用入門指南中的本機代碼構建應用程序的說明來配置開發環境，以便為Android構建React Native應用程序。
1. 設置目錄結構
為確保順暢體驗，請為集成的React Native項目創建一個新文件夾，然後將現有的Android項目複製到/ android子文件夾。
2. 安裝JavaScript依賴項
轉到項目的根目錄，並使用以下內容創建一個新的package.json文件：
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
}
}
接下來，確保已安裝 installed the yarn package manager.
安裝 react 和 react-native 軟件包。打開終端或命令提示符，然後導航到包含package.json 文件的目錄並運行：
$ yarn add react-native
這將打印類似於以下內容的消息（在紗線輸出中向上滾動以查看它）：
warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
這沒關係，這意味著我們還需要安裝React：
$ yarn add react@version_printed_above
Yarn創建了一個新的/ node_modules文件夾。此文件夾存儲構建項目所需的所有JavaScript依賴項。
增加
node_modules/ 到你的 .gitignore 文件內.將 React Native 添加到您的應用中
配置 maven
將React Native依賴項添加到應用程序的
build.gradle 文件:dependencies {
compile 'com.android.support:appcompat-v7:23.0.1'
...
compile "com.facebook.react:react-native:+" // From node_modules
}
I如果要確保始終在本機構建中使用特定的React Native版本，請將+替換為您從npm下載的實際React Native版本。
將本地React Native maven目錄的條目添加到build.gradle。請務必將其添加到“allprojects”塊，位於其他maven存儲庫之上：
allprojects {
repositories {
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
...
}
...
}
確保路徑正確！在Android Studio中運行Gradle同步後，您不應該遇到任何“無法解決：com.facebook.react：react-native：0.x.x”錯誤。
配置權限
接下來，確保您在 AndroidManifest.xml 中擁有 Internet 權限：
<uses-permission android:name="android.permission.INTERNET" />
如果您需要訪問 DevSettingsActivity，請添加到您的 AndroidManifest.xml：
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
這僅在從開發服務器重新加載JavaScript時用於開發模式，因此如果需要，可以在發布版本中刪除它。
代碼集成
現在我們將實際修改本機Android應用程序以集成React Native。
React Native 組件
我們要編寫的第一部分代碼是新的“高分”屏幕的實際React Native代碼，該代碼將集成到我們的應用程序中。
1. 創建 index.js 文件
首先，在React Native項目的根目錄中創建一個空的index.js文件。
index.js是React Native應用程序的起點，始終是必需的。它可以是一個小文件，需要其他文件作為React Native組件或應用程序的一部分，或者它可以包含它所需的所有代碼。在我們的例子中，我們將把所有內容都放在index.js中。
index.js是React Native應用程序的起點，始終是必需的。它可以是一個小文件，需要其他文件作為React Native組件或應用程序的一部分，或者它可以包含它所需的所有代碼。在我們的例子中，我們將把所有內容都放在index.js中。
2. 添加您的React Native代碼
在 index.js 中，創建組件。在我們的示例中，我們將在樣式化的 <View> 中添加簡單的 <Text> 組件：
import React 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}>Hello, World</Text>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);
3. 配置開發錯誤覆蓋的權限
如果您的應用定位到Android API級別23或更高級別，請確保您為開發版本啟用了android.permission.SYSTEM_ALERT_WINDOW權限。您可以使用 Settings.canDrawOverlays(this); 來檢查這一點。這在開發版本中是必需的，因為必須在所有其他窗口上方顯示React Native開發錯誤。由於API級別23（Android M）中引入了新的權限系統，用戶需要批准它。這可以通過在 onCreate() 方法中將以下代碼添加到Activity中來實現。
private final int OVERLAY_PERMISSION_REQ_CODE = 1; // Choose any value
...
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
最後，必須重寫 onActivityResult() 方法（如下面的代碼所示），以處理一致用戶體驗的已接受或拒絕的權限。
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted
}
}
}
}
The Magic: ReactRootView
讓我們添加一些本機代碼，以啟動React Native運行時並告訴它渲染我們的JS組件。為此，我們將創建一個創建ReactRootView的Activity，在其中啟動React應用程序並將其設置為主內容視圖。
如果您的目標是Android版本<5，請使用 com.android.support:appcompat 包中的 AppCompatActivity 類而不是Activity。
public class MyReactActivity extends Activity 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")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// The string here (e.g. "MyReactNativeApp") has to match
// the string in AppRegistry.registerComponent() in index.js
mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}
如果您使用React Native的入門工具包，請將“HelloWorld”字符串替換為index.js文件中的字符串（它是AppRegistry.registerComponent（）方法的第一個參數）。
如果您使用的是Android Studio，請使用Alt + Enter在MyReactActivity類中添加所有缺少的導入。小心使用你的包的BuildConfig，而不是facebook包中的那個。
我們需要將MyReactActivity的主題設置為Theme.AppCompat.Light.NoActionBar，因為一些React Native UI組件依賴於此主題。
我們需要將MyReactActivity的主題設置為Theme.AppCompat.Light.NoActionBar，因為一些React Native UI組件依賴於此主題。
<activity
android:name=".MyReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>
ReactInstanceManager可以由多個活動和/或片段共享。您將需要創建自己的ReactFragment或ReactActivity，並擁有一個包含ReactInstanceManager的單例持有者。當您需要ReactInstanceManager（例如，將ReactInstanceManager連接到這些活動或片段的生命週期）時，請使用單例提供的那個。
接下來，我們需要將一些活動生命週期回調傳遞給 ReactInstanceManager 和 ReactRootView：
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy(this);
}
if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
}
}
我們還需要將按鈕事件傳遞給 React Native：
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
這允許JavaScript控制當用戶按下硬件後退按鈕時發生的事情（例如，實現導航）。當JavaScript不處理後退按鈕時，將調用invokeDefaultOnBackPressed方法。默認情況下，這只是完成您的活動。
最後，我們需要連接開髮菜單。默認情況下，這是通過（憤怒）搖動設備激活的，但這在模擬器中不是很有用。因此，當您按下硬件菜單按鈕時，我們會顯示它（如果您使用的是Android Studio模擬器，請使用Ctrl + M）：
最後，我們需要連接開髮菜單。默認情況下，這是通過（憤怒）搖動設備激活的，但這在模擬器中不是很有用。因此，當您按下硬件菜單按鈕時，我們會顯示它（如果您使用的是Android Studio模擬器，請使用Ctrl + M）：
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
現在您的活動已準備好運行一些JavaScript代碼。
測試您的集成
您現在已經完成了將React Native與當前應用程序集成的所有基本步驟。現在我們將啟動React Native打包程序來構建index.bundle包和在localhost上運行的服務器來提供它。
1. 運行包裝工具
要運行您的應用程序，您需要首先啟動開發服務器。為此，只需在React Native項目的根目錄中運行以下命令：
$ yarn start
2. 執行你的應用
現在正常構建並運行您的Android應用。
一旦你在應用程序內部達到React支持的活動，它應該從開發服務器加載JavaScript代碼並顯示：
一旦你在應用程序內部達到React支持的活動，它應該從開發服務器加載JavaScript代碼並顯示：
在Android Studio中創建發布版本
您也可以使用Android Studio創建發布版本！它就像創建以前存在的原生Android應用程序的發布版本一樣簡單。還有一個額外的步驟，在每次發布版本之前，您都必須執行此操作。您需要執行以下命令來創建React Native捆綁包，該捆綁包將包含在您的原生Android應用程序中：
$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
不要忘記用正確的路徑替換路徑並創建資產文件夾（如果它不存在）。
現在只需像往常一樣在Android Studio中創建您的本機應用程序的發布版本，您應該很高興！
接下來呢?
此時，您可以照常繼續開發應用程序。請參閱我們的調試和部署文檔，以了解有關使用React Native的更多信息。
