一他膳、導入js
生成package.json文件
在項目根目錄下運行（彈出對話募胃，只管回車就行）：
AppledeMacBook-Pro:00 macbook$ npm init
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: (00)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/macbook/work/react-native/00/package.json:
{
"name": "00",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
在package.json文件中加入啟動命令
"start": "node node_modules/react-native/local-cli/cli.js start"
下載react-native
運行：
npm install --save react-native
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
新建js入口文件－－index.android.js
'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, 1</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
二祥诽、配置項目
項目添加react-native依賴
在build.gradle(Module: app)中添加
compile "com.facebook.react:react-native:+" // From node_modules
添加RN maven 入口
在build.gradle(Project: [ProjectName])中添加
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
}
開啟reload模式
在AndroidManifest.xml中添加
<uses-permission android:name="android.permission.INTERNET" />
三锥余、js入口
新建一個activity
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//創(chuàng)建一個ReactRootView饼煞，把它設(shè)置成Activity的主視圖
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();
}
//傳遞一些Activity的生命周期事件到ReactInstanceManager
//這是的JavaScript代碼可以控制當前用戶按下返回按鈕的時候作何處理（譬如控制導航切換等等）源葫。
//如果JavaScript端不處理相應(yīng)的事件，你的invokeDefaultOnBackPressed方法會被調(diào)用砖瞧。
//默認情況息堂，這會直接結(jié)束你的Activity。
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onResume(this, this);
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
//我們需要改動一下開發(fā)者菜單块促。
//默認情況下荣堰，任何開發(fā)者菜單都可以通過搖晃或者設(shè)備類觸發(fā)，不過這對模擬器不是很有用竭翠。
//所以我們讓它在按下Menu鍵的時候可以顯示
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
創(chuàng)建上面activity的節(jié)點
<activity
android:name=".MyReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>
運行
npm start
報錯
-
Error:Execution failed for task ':app:processDebugManifest'. > Manifest merger failed with multiple
原因：導入的庫在build.gradle中的minSdkVersion與你的應(yīng)用的minSdkVersion不匹配
解決：app要求應(yīng)用最小系統(tǒng)版本和庫要求系統(tǒng)最小版本不一致,改成一樣的就行了
