編輯:關於Android編程
React Native出自Facebook之手, 而且剛剛更新了文檔, 差一點我就放棄它了, 然而又撈了回來, 相比其他, 畢竟還是大公司大品牌有保障. 不多說了, 想知道更多, 自己網上看吧.
讓我們看看Docs中Android的Guides.
Integrating with Existing Apps
裡面是教如何在已有的Android項目集成ReactNative. 文檔有一些問題, 容我慢慢說來.
新建HelloWorld是必備的.
設置node_modules, 就是配置JS文檔所說的, 在項目中, 調用npm install --save react-native
, 然速度特別特別慢, 幾乎是不可能完成的任務(我是沒有完成). 然而這個react-native應該是通用的, 下載復制一份就好, 放在根目錄.
使用react-native init AwesomeProject
生成測試項目, 把AwesomeProject項目的node_modules復制出來即可.
更換服務器, 也可以提高下載速度.
$ npm install -g cnpm --registry=http://registry.npm.taobao.org
同樣也需要復制的是package.json, 也可以使用npm init
配置, 不過比較麻煩, 要添好多參數.
package.json的內容
{
name: AwesomeProject,
version: 0.0.1,
private: true,
scripts: {
start: node_modules/react-native/packager/packager.sh
},
dependencies: {
react-native: ^0.12.0
}
}
然後再調用最後一個命令
curl -o .flowconfig https://raw.githubusercontent.com
/facebook/react-native/master/.flowconfig
創建HTML5的主頁面index.android.js
, 按著文檔編輯即可.
這樣就完成了react-native的JS框架配置.
下面開始代碼的添加, 設置build.gradle
, 把react-native的maven庫集成進去.
compile 'com.facebook.react:react-native:0.13.0'
添加權限
我的代碼和Demo略有不同, 本質上都是在ReactRootView內添加H5的頁面.
資源文件
源文件, 主要是設置ReactRootView.
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mReactRootView = (ReactRootView) findViewById(R.id.test_js);
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, MyAwesomeApp, null);
// setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onResume(this);
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@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的真機調試.
在build.gradle中, 添加ndk支持.
defaultConfig {
ndk {
abiFilters armeabi-v7a, x86
}
}
在gradle.properties中, 添加ndk選項.
android.useDeprecatedNdk=true
設置ndk的目的是設置Debug Server Host, 設置IP.
進入項目根目錄啟動服務npm start
然後啟動App程序, 初始時是紅色錯誤頁面, 晃動手機, 選擇Dev Settings
, 選擇最後的Debug server host for device
, 把當前網絡IP寫入其中即可.
然後再Reload JS
OK, enjoy it.
本例的目的是實現一個簡單的餅狀統計圖,效果如下: 特點: 1.使用非常方便,可放在xml布局文件中,然後在代碼中設置內容,即: PieChartVie
本文實例講述了Android實現帶磁性的懸浮窗體效果。分享給大家供大家參考,具體如下:帶磁性的懸浮窗體,類似於360綠色小人主要實現的是:1.懸浮所有窗體之上2.有吸引力
這是谷歌官方給我們提供的一個兼容低版本安卓設備的軟件包,裡面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它,我們可以做很多事情,從最簡
本 質:AndroidManifest.xml 是 整 個 應 用 的 主 配 置 清 單 文 件 。 包 含 :該 應 用 的 包 名 、 版 本 號 、 組 件 、