React Native 混合开发（Android）入门实践

参考链接：

1.android ReactNative混合开发之最新教程

2.AndroidStudio嵌入ReactNative混合开发环境搭建

3.关于React-native里Android原生模块和组件的写法

4.React Native 常见错误总结

配置步骤

1.使用AS创建一个新的项目

2.在项目中集成React Native

使用AS自带的terminal工具执行以下命令：

  npm init
  npm install --save react react-native
  curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

init 主要根据提醒生成package.json文件
install --save react react-native 安装React 和React Native
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 下载.flowconfig文件

3.React Native相关配置
添加"start": "node node_modules/react-native/local-cli/cli.js start" 到package.json 文件下 scripts标签

添加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, World</Text>
       </View>
     )
   }
 }
 var styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
   },
   hello: {
     fontSize: 20,
     textAlign: 'center',
     margin: 10,
   },
 });
 AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

4.App build.gradle配置

dependencies {
 ...
 compile "com.facebook.react:react-native:+" // From node_modules.
}

5.整个工程build.gradle配置

allprojects {
 repositories {
     ...
     maven {
         // All of React Native (JS, Android binaries) is installed from npm
         url "$rootDir/node_modules/react-native/android"
     }
 }
 ...
}

6.AndroidManifest文件配置
添加<uses-permission android:name="android.permission.INTERNET" />到AndroidManifest.xml中。

至此，同步一下，检查react native等库是否被添加到External Libraries中

代码操作

1.修改MainActivity

2.自定义一个Application


注：Arrays.<~>asList 等价于 Arrays.asList

3.在AndroidManifest文件中对自定义的Application进行注册
添加android:name=".MyApplication"到application标签中

部署项目

1.开启react本地服务器 npm start

2.连接安卓真机，访问8081端口 adb reverse tcp:8081 tcp:8081

3.在AS中安装应用