接觸React Native 也差不多一年昔穴，沒(méi)有寫過(guò)文章。所以決定自己寫一些文章來(lái)記錄一下成長(zhǎng)記錄剧蚣。好吧支竹，廢話不說(shuō)，直接開干鸠按。
環(huán)境
Mac OS X版本:Mac OS X安裝React Native環(huán)境點(diǎn)擊進(jìn)入....
Windows版本:Windows系統(tǒng)安裝React Native環(huán)境點(diǎn)擊進(jìn)入...
新建項(xiàng)目
一條命令礼搁。（注意：輸入命令前，換到自己想要的cd下面目尖，不然init找不到項(xiàng)目）
react-native init HelloWorld
HelloWorld 為你的項(xiàng)目名字馒吴。如果被長(zhǎng)城阻礙的話，用換個(gè)好點(diǎn)的網(wǎng)絡(luò)，或者使用科技上網(wǎng)
目錄架構(gòu)
安裝和運(yùn)行
安裝到模擬器分兩種方法：
1饮戳、命令安裝 （使用命令前豪治，必須先開啟對(duì)應(yīng)的模擬器）
react-native run-ios
react-native run-android
2、直接在Android Studio 和 Xcode 運(yùn)行
android：用Android Studio 打開項(xiàng)目里面的android文件夾（注意并不是整個(gè)項(xiàng)目）
ios：直接打開ios文件夾里面的.xcodeproj文件扯罐。
Redux
Redux的相關(guān)介紹就不多說(shuō)负拟。有興趣的同志們可以自行谷歌。
首先我們先安裝三個(gè)依賴庫(kù)歹河。
npm install --save redux
npm install --save redux-thunk
npm install --save react-redux
對(duì)應(yīng)的GitHub地址:
redux：https://github.com/reactjs/redux
redux-thunk：https://github.com/gaearon/redux-thunk
react-redux：https://github.com/reactjs/react-redux
安裝完畢之后掩浙，查看一下package.json文件是否安裝成功
新建文件
看你的項(xiàng)目需求而定。不一定按照我的文件格式
首先我們要搞定的是：app/containers/app.js
/**
* Created by function on 2017/3/9.
*/
import React, {Component} from 'react';
//配置store
import {createStore, applyMiddleware, combineReducers} from 'redux';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';
import * as reducers from '../reducers';
import CounterApp from './counterApp';
/**
* 添加中間件
* combineReducers方法启泣，把reducers組合成一個(gè)傳遞給store涣脚。
* 配置文件，不用死記硬背寥茫，理解才是重點(diǎn)
* 應(yīng)用中應(yīng)有且僅有一個(gè) store遣蚀。
*/
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);
export default class App extends Component {
render() {
return (
<Provider store={store}>
<CounterApp />
</Provider>
);
}
}
這邊要注意的是combineReducers這個(gè)方法把reducers組合成一個(gè)傳遞給store，我們來(lái)看下reducers這個(gè)文件夾的index文件纱耻，路徑是：app/reducers/index
/**
* Created by function on 2017/3/9.
*/
import counter from './counter';
export {
counter
};
我這邊把所寫的Redux都會(huì)在這里export芭梯，這樣我們每創(chuàng)建一個(gè)Redux就在著這個(gè)文件export就可以了
<Provider store={store}>
<CounterApp />
</Provider>
然后Provider組件包裹的是主頁(yè)面<CounterApp/>
試驗(yàn)Redux是否可用
既然配了Redux，我們?cè)趺打?yàn)證它是否可以使用了呢弄喘？我們一起來(lái)做一個(gè)小小的功能玖喘，app/components/Button.js
/**
* Created by function on 2017/3/9.
*/
import React, {Component} from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
/**
* 簡(jiǎn)單封裝一個(gè)Button
* text：顯示的內(nèi)容
* onPress：回調(diào)
*/
export default class Button extends Component {
constructor(props) {
super(props);
}
render() {
const {text, onPress} = this.props;
return (
<View>
<TouchableOpacity onPress={onPress} style={styles.button}>
<Text>{text}</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
width: 100,
height: 30,
padding: 10,
backgroundColor: 'lightgray',
alignItems: 'center',
justifyContent: 'center',
margin: 3
}
});
/**
* Created by function on 2017/3/9.
*/
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import Button from '../components/Button';
import * as counterActions from '../actions/counterActions';
import {connect} from 'react-redux';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
// @connect(
// state => ({
// state: state.counter
// }), {counterActions})
class CounterApp extends Component {
constructor(props) {
super(props);
}
onAdd = () => {
const {counterActions} = this.props;
counterActions.increment()
};
onDel = () => {
const {counterActions} = this.props;
counterActions.decrement()
};
render() {
const {counter} = this.props;
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>{counter.count}</Text>
<Button onPress={this.onAdd} text={'add'}/>
<Button onPress={this.onDel} text={'del'}/>
</View>
);
}
}
// function select (store) {
// return {
// counter: store.counter
// }
// }
function mapStateToProps(state) {
return {
counter: state.counter
}
}
function mapDispatchToProps(dispatch) {
return {
counterActions: bindActionCreators(counterActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(CounterApp);
mapStateToProps關(guān)聯(lián)對(duì)應(yīng)的redux
function mapStateToProps(state) {
return {
counter: state.counter
}
}
mapDispatchToProps綁定對(duì)應(yīng)的action
function mapDispatchToProps(dispatch) {
return {
counterActions: bindActionCreators(counterActions, dispatch)
}
}
如果不寫bindActionCreators這個(gè)方法綁定dispatch
頁(yè)面上就要這樣調(diào)用
this.props.dispach(對(duì)應(yīng)的action)
把他們都connect頁(yè)面
export default connect(mapStateToProps, mapDispatchToProps)(CounterApp);
本文哪里有不完善的地方，歡迎技術(shù)交流
此文章demo 17.03.10 鏈接: https://pan.baidu.com/s/1jIE4XGM 密碼: tgke
github會(huì)隨著更新而更新https://github.com/LinsanityZ/EnjoyGossip
