react native 學習筆記----將react native嵌入到Android原生應用
不僅可以在react native 的js介面和現有工程的介面之間跳轉,而且可以把js寫的介面當成一個控制元件,嵌入到現有的activity,作為原生介面的一部分使用。
第一節:按照官方的例子,把js寫頁面放在一個activity,在原生應用裡啟動該activity。
開始之前,你要搭好react native開發Android環境,我是在mac上搭建的IDE,具體參看我前面的blog。本文以一個hello world為例。 第一步:先在Android studio中建立Hello world程式。第二步:進入你工程的根目錄,在命令列執行下面的命令:
$ npm init
這個命令會建立package.json檔案,輸入這個命令後,會提示你輸入一系列引數。按照提示輸入:我輸入的
引數如下:
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (myAppWithTest) integrate // 輸入專案名稱
version: (1.0.0) // 回車,使用預設版本號
description: test native for react // 輸入專案描述
entry point: (index.js) // 回車,使用預設檔名
test command: // 回車,使用預設值
git repository: // 回車留空或填入Git地址
keywords: react test // 填寫關鍵字react和test
author: andy // 填寫作者
license: (ISC) // 回車,使用預設值
上面填完後,再輸入下面的命令:
$ npm install --save react react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
上面的命令執行後,會建立node_modules目錄。
第三步:開啟在根目錄下剛才建立好的package.json檔案,新增下面一行
"start": "node node_modules/react-native/local-cli/cli.js start"
第四步:編輯index.android.js檔案,加入簡單的程式碼,你可以copy下面的程式碼到該檔案:
'use strict';
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, Andy</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
第五步:在你app的build.gradle檔案中新增react native依賴庫
compile "com.facebook.react:react-native:+" // From node_modules
第六步:在你project的 build.gradle檔案中新增 react native路徑:
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
...
}
第七步:在你的AndroidManifest.xml檔案中新增網路許可權
<uses-permission android:name="android.permission.INTERNET" />
第八步:建立一個載入JS程式碼的activity,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")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}
第九步:在AndroidManifest.xml檔案中,為剛才建立的activity指定一個主題,
<activity
android:name=".MyReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>
第十步:新增一些activity的生命週期函式,並新增一些程式碼:
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy();
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
第十一步:在MyReactActivity中新增按鍵響應函式:
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
第十二步:在hello world程式的介面上新增一個按鈕,載入MyReactActivity。
Button bt = (Button)findViewById(R.id.start_react); bt.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this,MyReactActivity.class); startActivity(intent); } });
第十三步:到這裡基本可以在android studio中執行程式了,先在命令列啟動js所需的伺服器,執行下面的命令即可:
$ npm start
最後,在android studio,像啟動其他程式一樣執行程式,點選按鈕就可以載入react native介面了。激動吧。如下圖:
第二節:將react native 寫的介面當成組建嵌入到現有的activity。
這個其實比較簡單,新建一個佈局xml檔案,在上面的建立的MyReactActivity的onCreate函式中,像原生一樣呼叫setContentView(R.layout.native_js); 然後通過addView 把reactnative 的介面,加入進入。下面是完整的onCreate函式程式碼:
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.native_js);
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, "HelloWorld", null);
LinearLayout view = (LinearLayout) findViewById(R.id.react_root);
view.addView(mReactRootView);
}
編譯執行,如下圖,灰色是原聲介面部分,藍色為react native介面:
問題:今天【20160908】將react native嵌入到原生應用後,執行碰到下面的錯誤。
解決辦法:我另外用命令react-native init test.新建了一個應用,然後把新工程node_modules目錄下的react目錄copy到了對應的位置。
相關推薦
react native 學習筆記----將react native嵌入到Android原生應用
不僅可以在react native 的js介面和現有工程的介面之間跳轉,而且可以把js寫的介面當成一個控制元件,嵌入到現有的activity,作為原生介面的一部分使用。 第一節:按照官方的例子,把js寫頁面放在一個activity,在原生應用裡啟動該activity。 開
React-Native學習筆記——正確整合到現有Android工程中
背景 我們可能需要將react-native整合到已有工程的某個module中,而不是從頭建立一個新工程。下面記錄了筆者一個demo的整合過程。 已有工程結構 下圖中,app為application型別module,rntrial為library型別的mo
react native學習筆記11——react-native-swiper輪播圖
react native swiper可以實現廣告輪播圖和應用引導頁的效果。 安裝 react-native-swiper是第三方元件,通過nmp來安裝。在專案的根目錄下,通過輸入 npm install react-native-swiper --s
React-Native 學習筆記-Android開發平臺-開發環境搭建
環境變量 最新版 下載 and 系統 系統環境變量 新版本 開發環境 studio 詳細步驟請查看官網對應文檔,BUT,有些註意事項請註意! 1,優先安裝Node.js,因為後面可以使用npm安裝軟件, 2,註意不要使用CNPM!!!!!!!!! 3,Android
React Native學習筆記 -- 開發環境搭建
ebo 安裝完成 原因 包管理工具 chown iss 運行 遇到 命令 工欲善其事,必先利其器。這次主要介紹mac osx下React Native的開發環境的搭建。 homebrew mac上的包管理工具,用於安裝nodejs和其他一些工具軟件,在terminal輸入下
react native學習筆記24——Modal實現自定義彈出對話方塊
前言 上一篇文章介紹React Native系統提供的兩個彈出框的api——Alert與AlertIOS,Alert可以在雙平臺通用,但是隻能展示資訊量有限功能單一的文字對話方塊。AlertIOS比Alert稍微豐富一點,可以展示供使用者輸入的對話方塊,但只能
React Native學習筆記2:Android環境搭建
背景 各位童鞋有木有感覺官方文件很坑啊,根據官網的描述,首先在chocolate就直接卡死了,VPN沒什麼卵用,於是逐個去官網下載,直到昨天才發現不用VPN也可以下!公司是windows環境,這裡就先用windows搭建。 因為本身是移動開發者,所以
React Native 學習筆記十三(原生模組之Toast)
在學習官網上的Toast 的過程中 出現很多的坑 廢話就不說了 官網上都有 官網講解 實現思路 : 我們之前已經將react-native 嵌入原生了 那麼 我們就在之前的基礎上進行修改就好了 建立ToastUtils.java 繼承ReactContextBas
React-Native學習筆記之:導航器Navigator實現頁面間跳轉
Navigator用來實現不同頁面的切換,想設定Navigator,必須確定一個或多個呼叫routes物件,去定義每個場景。 還可以利用renderScene方法,導航欄可以根據指定的路由來渲染場景。
React Native 學習筆記(二)
坑一,環境好了,但是因為專案需求經常要安裝一些三方庫,xcode-select: error: tool ‘xcodebuild’ requires Xcode, but active developer directory ‘/Library/Develope
React Native學習筆記一之搭建開發環境
因為專案需要,今天開始正式學習React Native,先來搭建個開發環境 忐忑的心情 因為專案比較急,而且客戶要求使用React Native開發,只能先學點基礎然後在專案中使用的時候,邊做邊學了,在保證工期的前提下,進擊的程式猿, go,go,go!
react native學習筆記13——FlatList上拉載入
我們可以利用官方元件RefreshControl實現下拉重新整理功能,但React Native官方沒有提供相應的上拉載入的元件,因此在RN中實現上拉載入比下拉重新整理要複雜一點。 雖然沒有直接提供上拉載入的元件,不過我們仍可以通過FlatList的onEnd
React Native學習筆記之--向原生應用中整合RN頁面
React Native學習筆記之–向原生應用中整合RN頁面 根據在官方文件的學習要向已有的原生專案中新增RN元件最重要的就是以下幾步: 1.Understand what React Native components you want to in
React Native 學習筆記(一)--init 專案 和 執行專案
宣告:此篇blog是在Windows環境下開發Android專案的學習筆記,最近也是在網上翻找資料發現,網上的資源基本上都是Mac環境下的,而且大部分的資料都是關於React Native + Web / Service 的,關於android的學習資源不多,因此也就想通過
React Native學習筆記之--ListView和RefreshControl實現下拉重新整理
React Native學習筆記之–ListView和RefreshControl實現下拉重新整理 今天利用React Native中的ListView來實現原生開發中的UITableView(Android中就叫ListView)的介面效果。 資料數利用Ch
react native 學習筆記-----理解redux的一個極其簡單例子
'use strict'; import React, { Component, PropTypes} from 'react'; import { StyleSheet, Text, View, Image, Button, AppRegistry, TouchableHighl
react native學習筆記15——Picker、Switch、Slider
本文將介紹三個常用的元件Picker、Switch、Slider,它們都是官方提供的,並且均可以在android與ios渲染對應的原生元件。這三個元件的使用很簡單,在實戰開發中也很常見,因此這裡放在一起介紹。 Picker選擇器 Picker選擇器,通常
React-Native學習筆記——技術棧及簡介
推薦的技術棧順序清單 1、阮一峰es6: http://es6.ruanyifeng.com/ es6中的新特性是後續內容的基礎,重點內容有let關鍵字、解構賦值、建構函式和原型鏈、Promise物件、yield關鍵字、Generator函式、aysnc/await等
React Native學習筆記(一)Mac OS X下React Native的環境搭建
本文介紹Mac OS X系統下的React Native環境搭建過程。 1.環境要求: 1) Mac OS X作業系統 2) Xcode6.4或以上版本 3) Node.js4.0或以上版本 4) watchman和flow 2.安裝過程 1) N
React Native學習筆記之--元件之間資料的傳遞和跳轉
React Native學習筆記之–元件之間資料的傳遞和跳轉 自定義屬性的定義方式和傳遞 假定元件ComponentA中的自定義屬性為 static props = { tit