React Native

# 一、新建android项目

- 注意项目中的最低版本是16，目标版本是23，否则会一直错，试了好多遍都是。

# 二、配置rn依赖

- 项目gradle中加入maven

maven{

url"$rootDir/node_modules/react-native/android"

}

- app的gradle中加入rn依赖

compile "com.facebook.react:react-native:+"

- android选项配置下加入findbugs的依赖

configurations.all{

resolutionStrategy.force"com.google.code.findbugs:jsr305:1.3.9"

}

# androidmanifest.xml中加入网络请求

# 三、利用npm init命名初始化项目

- 注意需要在android原生项目的根目录下，此时结束会生成package.json文件，内容如下，里面的"start":"node node_modules/react-native/local-cli/cli.js start"是后加入的：

{

"name": "reactdemo",

"version": "1.0.0",

"description": "react native app demo",

"main": "index.android.js",

"scripts": {

"test": "no",

"start":"node node_modules/react-native/local-cli/cli.js start"

"repository": {

"type": "git",

"url": "no"

"keywords": [

"no"

"author": "xiao",

"license": "ISC"，

"dependencies": {

"react": "^15.4.2",

"react-native": "^0.42.3"

}

# 四、npm install --save react react-native安装react 以及相关文件

# 五、拷贝.flowconfig文件到项目的根目录下

# 六、如果src/main下面没有assets目录，请手动创建，因为后面的rn生成的组件会存储在该目录下

# 七、创建index.android.js文件

- 编写要展示的内容，注意里面的registerComponent注册组件名要与package.json的name一样

'use strict'import React,{Component}from 'react';import{ AppRegistry, Text, View, StyleSheet, ToastAndroid, DeviceEventEmitter}from 'react-native';export default class ReactDemo extends React.Component { render() { return (恭喜你，已经创建完第一个简单的混合项目hello word ReactNative) }}var styles = StyleSheet.create({ hello: { fontSize: 20, textAlign: 'center', margin: 10, },});AppRegistry.registerComponent('reactdemo',()=>ReactDemo);

# 八、npm start启动服务，如果出错请先运行以下命令

# 九、react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

（1）--platform：平台

（2） --dev：开发模式

（3） --entry-file：条目文件

（4）--bundle-output：bundle文件生成的目录

（5）--assets-dest：资源文件生成的目录

# 十、修改启动activity的内容

public class MainActivity extends ReactActivity { @Override protected String getMainComponentName() { return "reactdemo"; } @Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected ListgetPackages() { return Arrays.asList(new MainReactPackage());

}