React Native 可以說很是火,很是多bat的項目都在使用。不用發版就可以解決一些問題,給程序猿帶來了很是多福利。javascript
研究了一下午,把Flux框架在Android中給執行了起來。分享給你們……
關於Flux框架,官方地址是 Flux,有興趣的可以參考。
官方給出的關於Flux的解釋例如如下:css
Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.html
翻譯內容:java
Flux是 Facebook 用於構建Web客戶端應用程序的應用程序架構。它使用單向數據流來補充React的組合視圖組件。與其說它是一個框架。不如說它是一種模式。你可以開始使用該框架,不用寫一些新的代碼。git
Flux的流程圖例如如下所看到的:github
開始搭建項目,項目的文件夾結構例如如下所看到的web
export default class O2OActDetail extends Component {
// 構造函數
constructor(props) {
super(props);
}
render() {
return (<MyButtonController />);
}
}
MyButtonController express
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>); } }
ButtonActions 事件操做markdown
var ButtonActions = {
addNewItem (text) {
Util.log("MyButton=====>ButtonActions-->" + text)
AppDispatcher.dispatch({
actionType: 'ADD_NEW_ITEM',
text: text
});
},
};
module.exports = ButtonActions;
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;
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 一塊兒討論。