做一个完整的纯react-naitve安卓应用【从环境安装到应用发布】

前提：从来没有写过android 跟 ios 应用，是一个小前端。前一段时间玩了一下 react-native 感觉还不错，应用代码还未开源。

环境： win7

成果：

　　






一、安装

1、SDK安装

提示： 安装需通过代理，不然会很慢哟~~

安装 android studio 安装2.0的版本

在studio中安装以下SDK





添加环境变量（变量值为sdk路径）：



2、全局 react-native 安装

npm install -g react-native-cli

3、测试安装

选一个文件夹，在文件夹下面运行

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

第一行创建一个 react-native 项目，

第三行 android工程中gradle的依赖关系会去先编译node_modules下RN的代码，并加入自己的工程中。

这个时候要是没有弹出打包的弹窗，可以手动触发

cd AwesomeProject
react-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 (
<Provider>
<Nav />
</Provider>
);
}

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',
}
})

在标签中的引用：

<View style = { styles.child }>
<Text style = { styles.key }>关键</Text>
<View style ={ styles.name }>
<Text>react-native</Text>
</View>
</View>

2、直接写在标签中

<View style = {{flexDirection: 'row'}}>
<Text style = {{ width: 50, color:'#999' }}>react-native</Text>
</View>

四、组件

子组件：

import React, { Component } from 'react';
import {
　　Text,
　　View
} from 'react-native';

class Child extends Component {
render() {
　　　　return (
　　　　　　<View>
　　　　　　　　<Text>{ this.props.name }</Text>
　　　　　　</View>
　　　　)
　　}
}

export default Child;

父组件：

import React, { Component } from 'react';
import {
　View
} from 'react-native';
import Child from './Child';

class Father extends Component {
render() {
　　　　return (
　　　　　　<View>
　　　　　　　　<Child name= {'Mickey'}/>
　　　　　　</View>
　　　　)
　　}
}

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 (
<Provider store = { store }>
<Nav />
</Provider>
);
}

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 (
<Text></Text>
)
}
return (
<ListView
dataSource = { this.state.dataSource }
renderRow = {(rowData) => <Child folder = { rowData }/>}
></ListView>
);
}
}

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 中的一个 ListView 标签

接下来我们就可以愉快地编码了。

六、发布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=true
MYAPP_RELEASE_STORE_FILE=meiqi.jks
MYAPP_RELEASE_KEY_ALIAS=mickey
MYAPP_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、 修改应用名称

打开文件

<resources>
<string name="app_name">应用名称</string>
</resources>

2、 修改应用的logo

打开到这个目录



只需要把下面的图片更换成为我们需要的logo即可，四个文件夹分别对应四张不同大小的图片

一个完整的 纯 react-native 的 android 应用就完成啦。

转载请注明出处 http://www.cnblogs.com/Miss-mickey/p/6699535.html