概述
React Native 能够说非常火，非常多bat的项目都在使用。不用发版就能够解决一些问题，给程序猿带来了非常多福利。
研究了一下午，把Flux框架在Android中给执行了起来。分享给大家……
关于Flux框架，官方地址是 Flux，有兴趣的能够參考。
官方给出的关于Flux的解释例如以下：
翻译内容：
流程图
Flux的流程图例如以下所看到的：
项目结构
開始搭建项目，项目的文件夹结构例如以下所看到的
View
export default class O2OActDetail extends Component {
// 构造函数
constructor(props) {
super(props);
}
render() {
return (<MyButtonController />);
}
}Components
MyButtonController
export default class MyButtonController extends Component {
constructor(props) {
super(props);
this._onChange = this._onChange.bind(this);
this.state = {
items: ListStore.getAll()
}
}
componentDidMount() {
ListStore.addChangeListener(this._onChange);
}
componentWillUnmount() {
ListStore.removeChangeListener(this._onChange);
}
_onChange() {
var items = ListStore.getAll();
Util.log("MyButton=====>_onChange-->" + items.length)
this.setState({
items: ListStore.getAll()
});
}
render() {
return (<MyButton
items={this.state.items}
/>);
}
}MyButton 显示的View
export default class MyButton extends Component {
// 构造函数
constructor(props) {
super(props);
this.createNewItem = this.createNewItem.bind(this);
var items = props.items;
Util.log("MyButton=====>items-->" + items.length)
}
createNewItem() {
ButtonActions.addNewItem('data');
}
render() {
var itemHtml = this.props.items.map(function (listItem, i) {
return listItem + i;
});
return (
<View>
<TouchableOpacity onPress={() => {
this.createNewItem()
}} activeOpacity={1.0}>
<View style={{
width: 100, height: 40, borderWidth: 1, borderRadius: 4,
borderColor: "#f35353", margin: 50, alignItems: "center"
}}>
<Text style={{alignItems: "center"}}>測试button</Text>
</View>
</TouchableOpacity>
<View style={{flexDirection: "row"}}>
<Text style={{fontSize: 34, marginLeft: 100}}>{itemHtml}</Text>
</View>
</View>);
}
}actions
ButtonActions 事件操作
var ButtonActions = {
addNewItem (text) {
Util.log("MyButton=====>ButtonActions-->" + text)
AppDispatcher.dispatch({
actionType: 'ADD_NEW_ITEM',
text: text
});
},
};
module.exports = ButtonActions;Dispatcher
AppDispatcher负责分发事件
/**
* Created by shenyiya on 2017/2/14.
*/
var ListStore = require('../../o2o/stores/ListStore');
var Dispatcher = require('flux').Dispatcher;
var AppDispatcher = new Dispatcher();
AppDispatcher.register((action) => {
switch (action.actionType) {
case 'ADD_NEW_ITEM':
ListStore.addNewItemHandler(action.text);
ListStore.emitChange();
break;
default:
// no op
}
});
module.exports = AppDispatcher;Stores
ListStore负责处理数据
/**
* Created by shenyiya on 2017/2/14.
*/
var EventEmitter = require('events').EventEmitter;
var assign = require('object-assign');
var ListStore = assign({}, EventEmitter.prototype, {
items: [],
getAll: function () {
return this.items;
},
addNewItemHandler: function (text) {
this.items.push(text);
},
emitChange: function () {
this.emit('change');
},
addChangeListener: function(callback) {
this.on('change', callback);
},
removeChangeListener: function(callback) {
this.removeListener('change', callback);
}
});
module.exports = ListStore;到这里位置。该项目的全部结构搭建完毕。
感谢
感谢 阮一峰 作者的博客《Flux 架构新手教程》指导 Flux 架构新手教程
假设大家有问题能够加入我的微信 shenyiya 一起讨论。