前提：从来没有写过android 跟 ios 应用，是一个小前端。前一段时间玩了一下 react-native 感觉还不错，应用代码还未开源。
环境： win7
成果：
一、安装
1、SDK安装
提示： 安装需通过代理，不然会很慢哟~~
安装 安装2.0的版本
在studio中安装以下SDK
添加环境变量（变量值为sdk路径）：
2、全局 react-native 安装
npm install -g react-native-cli
3、测试安装
选一个文件夹，在文件夹下面运行
react-native init AwesomeProjectcd AwesomeProjectreact-native run-android
第一行创建一个 react-native 项目，
第三行 android工程中gradle的依赖关系会去先编译node_modules下RN的代码，并加入自己的工程中。
这个时候要是没有弹出打包的弹窗，可以手动触发
cd AwesomeProjectreact-native start
打包 react-native
这个时候，可以看到项目的目录
其中 index.android.js 就是我们的入口文件
我们可以在这里目录下找到我们需要用到的apk
把 apk 在 android 手机上安装。
首次打开app 我们需要设置热更新的地址，通过摇一摇手机，把开发菜单摇出来。 点击 Dev Settings 设置开发
Debugging 调试
手机与电脑需要在同一网络下，并且填上电脑的地址，端口号默认是8081
点击确认之后，我们就可以回到页面上，在开发菜单上点击 reload 就可以看到
首次打包我们需要稍等一下
接下来我们只需要在这个基础上修改 index.android.js 这个文件就可以啦。
因为react-native 本身的设计就是ios跟android公用一套代码，那么这里我们可以使用统一的入口文件 main.js
4、统一入口文件
文件目录
main.js
import React, { Component } from 'react';import { Provider } from 'react-redux';import Nav from './component/Nav';function render() { return ( ); }export default render；
index.android.js
import { AppRegistry } from 'react-native';import main from './main';AppRegistry.registerComponent('AwesomeProject', () => main);
二、React-Native 标签
react-native中的标签跟web页面的不同，所有标签的第一个字母都为大写，跟react 的组件相似、每个标签只能做一定的东西，某些标签一定需要被包裹、某些标签不能单独使用，具体可以看文档。
使用标签前需要引入标签
import { Text, View, StyleSheet, TouchableHighlight, Linking, Alert} from 'react-native';
三、Reac-Native 样式
react-native中的样式除了一部分之外，大多数样式为css中的驼峰式写法。react-native支持Flexbox布局
1、 样式与标签分离的写法，相当于web页面中css与标签分离
样式：
var styles = StyleSheet.create({ child: { paddingVertical: 15, marginHorizontal: 10, borderColor: '#f6f6f6', borderBottomWidth: 1, flexDirection: 'row' }, key: { paddingHorizontal: 10, width: 50, }, name: { flex: 5, flexDirection: 'row', alignItems: 'center', }})
在标签中的引用：
关键 react-native
2、直接写在标签中
react-native
四、组件
子组件：
class Child extends Component { render() { return ( { this.props.name } ) }} export default Child;
父组件：
import React, { Component } from 'react';import { View } from 'react-native'; import Child from './Child';class Father extends Component { render() { return ( ) }}export default Fatcher;
五、使用 redux 管理数据
1、redux 目录
2、新建action （reducers/preview.js）
var previewInitState = { previewList: []};
3、新建子reducer （reducers/preview.js）
export default function (state = previewInitState, action) { switch (action.type) { case 'GET_FOLDER': return {...state, previewList: action.previewList}; default: return state; }}
4、合并所有reducer （reducers/index.js）
import { combineReducers } from 'redux';import previewReducer from './preview';var reducers = combineReducers({ previewReducer: previewReducer});export default reducers
5、新建store （store/index.js）
import { createStore, applyMiddleware,compose } from 'redux';import thunk from 'redux-thunk';import reducers from '../reducers'var store = createStore( reducers, compose( applyMiddleware(thunk) ))export default store;
这样子我们就可以再react-native中使用 redux 啦
6、在入口文件 main.js 中引入 store
import React, { Component } from 'react';import { Provider } from 'react-redux';import stores from './redux/store';import Nav from './component/Nav';const store = stores;function render() { return ( ); }store.subscribe(function(){ render();});export default render
subscribe 函数为监听 store 的变化，当store变化的时候，组件相应地更新
7、在组件中使用store
import React, { Component } from 'react';import { connect } from 'react-redux';import Child from './Child';import store from '../redux/store'import { Text, ListView, StyleSheet} from 'react-native';class Father extends Component { constructor(props){ super(props); var { previewList } = this.props; fetch(config.url +'/getAllPreview', { method: 'GET' }) .then((response) => { return response.json();// 转换为JSON }) .then((data) => { store.dispatch({ type: 'GET_FOLDER', previewList: data.previewList }) }) .catch((error) => { console.error(error) }) } render() { var { previewList, dispatch } = this.props; const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(previewList) } if (previewList < 1) { return ( ); }}const mapStateToProps = (state) => { return { previewList: state.previewReducer.previewList, }}const mapDispatchToProps = (dispatch, ownProps) => { return {}}export default connect( mapStateToProps, mapDispatchToProps)(Father); 上面代码中的 store.dispatch 方法为 把从后台请求过来的数据跟新到 store 去 。
mapStateToProps 方法 则是把 state 复制到组件的 props 中。
上面使用了 react-native 中的一个 标签
接下来我们就可以愉快地编码了。
六、发布release 版本
开发版本的 程序性能跟 发布版本的会相差比较大，不要因为开发版本性能不好而放弃react-native哟~发布版本的还是挺顺畅的。
1、生成密匙库
使用命令行生成：
在JDK的bin目录下面打开控制台，输入
$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
接下来要在控制台上填写好所有信息等
或者我们也可以在 android studio 中生成
打开 android studio，打开任意一个 android 项目 选择 build 下面的 Generate Signed APK...
填写密匙库生成的路径、我这里把密匙库放在桌面
点击 create new 填写好密匙库的资料。
填写完之后 点击 ok 再点击 next，弹出这个 摁 finish
完成之后，我们可以在桌面上找到密匙库 meiqi.jks
2、在项目中使用密匙库
把密匙库放在这个目录下面
打开这个文件
在文件的后面追加我们所生成的密匙库的信息
android.useDeprecatedNdk=trueMYAPP_RELEASE_STORE_FILE=meiqi.jksMYAPP_RELEASE_KEY_ALIAS=mickeyMYAPP_RELEASE_STORE_PASSWORD=****** //密匙库密码MYAPP_RELEASE_KEY_PASSWORD=****** //密匙库密码
打开这个文件
在文件上面添加
...android { ... defaultConfig { ... } signingConfigs { release { storeFile file(MYAPP_RELEASE_STORE_FILE) storePassword MYAPP_RELEASE_STORE_PASSWORD keyAlias MYAPP_RELEASE_KEY_ALIAS keyPassword MYAPP_RELEASE_KEY_PASSWORD } } buildTypes { release { ... signingConfig signingConfigs.release } }}...
3、发布 release 的 apk 文件
cd android && ./gradlew assembleRelease
这时候我们就可以看到 目录下多出了 两个release 的apk ，这个时候我们只需要把apk发送到手机，并安装就可以使用啦。
但是，这个时候，我们的应用还是很丑的绿色安卓图标，这时候我们需要把我们产品的logo放上去，并且修改应用的名称。
七、修改应用名称、logo
1、 修改应用名称
打开文件
应用名称
2、 修改应用的logo
打开到这个目录
只需要把下面的图片更换成为我们需要的logo即可，四个文件夹分别对应四张不同大小的图片
一个完整的 纯 react-native 的 android 应用就完成啦。
转载请注明出处