如果新建一個(gè)react native項(xiàng)目，在Android中寫native的話是很容易的，一般情況下項(xiàng)目已經(jīng)存在望几，如何在已經(jīng)存在的app中引入react native呢？
Prepare your app
首先在你的app中的build.gradle引入react native的jar包
compile "com.facebook.react:react-native:+"
在項(xiàng)目的build.gradle中加入本地react native的maven地址
repositories {
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$projectDir/../../node_modules/react-native/android"
}
}
然后在app中的AndroidManifest.xml中添加網(wǎng)絡(luò)權(quán)限萤厅，一般都存在了橄抹，這一部可以忽略
<uses-permission android:name="android.permission.INTERNET" />
Add native code
添加本地代碼確保react native啟動(dòng)，開始渲染惕味，當(dāng)開啟一個(gè)Activity時(shí)創(chuàng)建一個(gè)ReactRootView楼誓，啟動(dòng)react并且把它作為主控件
public class RNTestActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "MyAwesomeApp";
}
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList( new MainReactPackage() );
}
}
Add JS to your app
在項(xiàng)目根文件執(zhí)行一下命令：
$ npm init
$ npm install --save react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
創(chuàng)建了node_modules文件，添加了react-native依賴包名挥，現(xiàn)在打開新建的package.json文件疟羹，在scripts標(biāo)簽中加入
"start": "node node_modules/react-native/local-cli/cli.js start"
然后在index.android.js中寫入相關(guān)代碼
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class MyAwesomeApp 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('MyAwesomeApp', () => MyAwesomeApp);
吐槽：react native都到0.29了，結(jié)果在導(dǎo)入原生項(xiàng)目中只到0.20.1,還各種落后的jar包禀倔，還有就是各種版本配置的包也是奇葩榄融，不兼容最新的，個(gè)人感覺很垃圾救湖，不過還好愧杯，畢竟沒有到1.0，1.0要是再出現(xiàn)這么惡心的問題鞋既，就只能呵呵了
如果你遇到了Method 'void android.support.v4.net.ConnectivityManagerCompat.()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule'這個(gè)問題那么恭喜你力九，不兼容com.android.support:appcompat-v7:23.2.1
將 com.android.support:appcompat-v7:23.2.1 改為 com.android.support:appcompat-v7:23.0.1
如果你遇到了更多的奇葩問題耍铜，那就是react native與app撞車了，慢慢解決吧跌前！
