React Native 可以说非常火,很多 bat 的项目都在使用,不用发版就可以解决一些问题,给程序员带来了很多福利。
研究了一下午,把 Flux 框架在 Android 中给运行了起来,分享给大家……
关于 Flux 框架,官方地址是 ,有兴趣的可以参考。
官方给出的关于 Flux 的解释如下:
翻译内容:
Flux 的流程图如下所示:
开始搭建项目:
- export
- default class O2OActDetail extends Component {
- // 构造函数
- constructor(props) {
- super(props);
- }
- render() {
- return ();
- }
- }
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 (this.state.items
- }
- />);
- }
- }/
MyButton
- 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"
- }
- } > 测试按钮 < /Text>
- </View > </TouchableOpacity>
- <View style={{flexDirection: "row"}}>
- <Text style={{fontSize: 34, marginLeft: 100}}>{itemHtml}</Text > </View>
- </View > );
- }
- }
ButtonActions
- var ButtonActions = {
- addNewItem (text) {
- Util.log("MyButton=====>ButtonActions-->" + text)
- AppDispatcher.dispatch({
- actionType: 'ADD_NEW_ITEM',
- text: text
- });
- },
- };
- module.exports = ButtonActions;
/**
* 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:
- }
- });
- module.exports = AppDispatcher;
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 架构入门教程》指导
如果大家有问题可以添加我的微信 shenyiya 一起讨论。
来源: http://www.bubuko.com/infodetail-1945284.html