React Native Flux框架的使用
Flux是RN比较常用的框架,用起来相对比较简单和方便。Flux实现的原理不再说明。这里只做Flux在项目中的具体使用。
使用Flux首先需要安装Flux包
npm install flux
创建flux文件
- 创建
dispatcher.js
-> dispatcher
var Dispatcher = require('flux').Dispatcher;
module.exports = new Dispatcher();
- 声明
type
常量AppConstants.js
npm install keymirror
keymirror: 在 Closure Compiler 的高级模式下,Object 的 key 会被压缩替换成更短的字符,这样就不能创建一个 key 跟 value 相等的 Object 了。keyMirror 就是解决这个问题的。
import keyMirror from 'keymirror'; [^keymirror]
let AppConstants = keyMirror({
ADD_NUMBER: null,
GET_NUMBER: null,
});
export default AppConstants;
- 创建
AppActions.js
-> action
import AppDispatcher from '../dispatcher/AppDispatcher';
import AppConstants from '../constants/AppConstants';
let AppActions = {
addNumberAction(num) {
// 加上num
AppDispatcher.dispatch({
actionType: AppConstants.ADD_NUMBER,
num: num
});
},
getNumberAction(){
//获取最新的数组
AppDispatcher.dispatch({
actionType:AppConstants.GET_NUMBER,
})
}
};
export default AppActions;
- 创建
AppStore
-> store
import {EventEmitter} from 'events';
import assign from 'object-assign';
import AppDispatcher from '../dispatcher/AppDispatcher';
import AppConstants from '../constants/AppConstants';
let CHANGE_EVENT = 'change';
const AppStore = assign({}, EventEmitter.prototype, {
num: 100, //初始化
addNumber: function(number) {
this.num += number;
// alert(this.num);
return this.num;
},
getNumber: function() {
return this.num;
},
emitChange: function() {
this.emit(CHANGE_EVENT);
},
addChangeListener: function(callback) {
this.on(CHANGE_EVENT, callback);
},
removeChangeListener: function(callback) {
this.removeListener(CHANGE_EVENT, callback);
}
})
// Register callback to handle all updates
AppDispatcher.register((action) =>{
switch(action.actionType) {
case AppConstants.ADD_NUMBER:
// _getStateMessage(action.num);
AppStore.addNumber(action.num);
AppStore.emitChange()
//alert(action.num);
break;
case AppConstants.GET_NUMBER:
AppStore.getNumber();
AppStore.emitChange()
break;
case AppConstants.SET_MESSAGE:
AppStore.emitChange();
break;
default:
}
});
export default AppStore;
在项目中使用
此项目实现效果为A页面数字 Push到 B 页面 B页面对数字进行添加 pop回A页面 A页面数字改变
A.js
import React, { Component } from 'react'
import {
Navigator,
Text,
View,
AsyncStorage,
TouchableHighlight
} from 'react-native'
import SecondPage from './SecondPage'
import AppStore from './stores/AppStore'
// import AppActions from './actions/AppActions'
export default class HomePage extends Component
{
constructor(props) {
super(props);
this.state = {
number:100
}
}
componentDidMount() {
AppStore.addChangeListener(this._onChange.bind(this));
}
componentWillUnmount() {
AppStore.removeChangeListener(this._onChange.bind(this));
}
_onChange() {
this.setState({
number: AppStore.getNumber()
});
}
render(){
return (
<View style={{flex:1,justifyContent:'center',alignItems: 'center'}}>
<Text style={{padding:50}}>{this.state.number}</Text>
<TouchableHighlight onPress={()=>{
const navigator = this.props.navigator
if (navigator) {
navigator.push(
{
name:'SecondPage',
component:SecondPage,
params:{
getRegionSelectText:(text)=>{
this.setState({regionSelect:text})
}
}
}
)
}
}}>
<Text>下一个页面</Text>
</TouchableHighlight>
</View>
)
}
}
B.js
import React, { Component } from 'react'
import {
Navigator,
Text,
View,
AsyncStorage,
TouchableHighlight
} from 'react-native'
import AppStore from './stores/AppStore'
import AppActions from './actions/AppActions'
export default class SecondPage extends Component
{
constructor(props) {
super(props);
this.state = {
number:AppActions.getNumberAction()
}
}
componentDidMount() {
AppStore.addChangeListener(this._onChange.bind(this));
}
componentWillUnmount() {
AppStore.removeChangeListener(this._onChange.bind(this));
}
_onChange() {
this.setState({
number: AppStore.getNumber()
});
}
render(){
return (
<View style={{flex:1,justifyContent:'space-around',alignItems: 'center',backgroundColor:'#eee'}}>
<Text>{this.state.number}</Text>
<TouchableHighlight onPress={()=>{
AppActions.addNumberAction(10);
}}>
<Text>增加</Text>
</TouchableHighlight>
<TouchableHighlight onPress={()=>{
const navigator = this.props.navigator
if (navigator) {
navigator.pop()
}
}}>
<Text>返回页面</Text>
</TouchableHighlight>
</View>
)
}
}
个人理解,不一定正确
Flux 实现state的变化主要是根据
EventEmitter
进行通知改变。所以使用的页面都有
componentDidMount() {
AppStore.addChangeListener(this._onChange.bind(this));
}
componentWillUnmount() {
AppStore.removeChangeListener(this._onChange.bind(this));
}
_onChange() {
this.setState({
number: AppStore.getNumber()
});
}
三个方法。这三个方法实现并监听了number的变化,并改变state,进行页面的刷新。
初步理解