前言
學(xué)過Android的同學(xué)應(yīng)該都用過的一個(gè)框架->EventBus. 在我們需要的地方設(shè)置一個(gè)監(jiān)聽,在另外一段代碼中,我們只要發(fā)送一個(gè)Event,則監(jiān)聽中的代碼就會(huì)立即執(zhí)行. 能很大程度上解耦代碼.
我們都知道 react-native 是依賴于Node.js的,而在node.js 中,剛好有一個(gè)與EventBus 類似的機(jī)制 Events.
使用場(chǎng)景
在講如何使用之前,我們先來看一下,Event 對(duì)我們有什么幫助,我們?yōu)槭裁葱枰褂盟?
場(chǎng)景一
該頁面顯示的內(nèi)容都是用戶所訂閱的主播,然后旁邊與一個(gè)"已訂閱"按鈕,如果點(diǎn)擊,則按鈕變成"訂閱",注意 頭部 "我的訂閱( counter )" 這里面的數(shù)字是會(huì)變動(dòng)的.
常規(guī)處理可能是這樣的,該頁面肯定是包含多個(gè) 組件Component 組成,但 組件Component之間又沒有直接關(guān)聯(lián),所以 我們只能用回調(diào)處理,一層層將事件發(fā)送到 頂級(jí)組件中,然后又分發(fā)出去.
使用 Events 后就簡單多了,我們可以在頭部Component 中注冊(cè)監(jiān)聽,然后在 ListView的Item中發(fā)送Event事件即可實(shí)現(xiàn)需求.
場(chǎng)景二
用戶登錄前后頁面狀態(tài)的更改.
安裝使用
安裝
將命令行移動(dòng)到項(xiàng)目的根目錄,執(zhí)行以下: npm install events --save
使用示例
- 新建
CountEmitter.js文件
'use strict';
const EventEmitter = require('events');
class CountEmitter extends EventEmitter{
}
const SingleCountEmitter = new CountEmitter();
export default SingleCountEmitter;
- 新建
TopPage.js文件
'use strict';
import React from 'react';
import {
View,
Text
} from 'react-native';
import CounterEmitter from './CountEmitter';
class TopPage extends React.Component{
// 構(gòu)造
constructor(props) {
super(props);
// 初始狀態(tài)
this.state = {
count:0
};
}
componentWillMount() {
CounterEmitter.addListener('addCounter',()=>{
let newCount=this.state.count+1;
this.setState({
count:newCount
});
});
CounterEmitter.addListener('reduceCounter',()=>{
let newCount=this.state.count-1;
this.setState({
count:newCount
});
});
}
render(){
return (
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<Text>Count: {this.state.count}</Text>
</View>
);
}
}
export default TopPage;
- 新建
BottomPage.js文件
'use strict';
import React from 'react';
import {
View,
Text,
TouchableOpacity
} from 'react-native';
import CounterEmitter from './CountEmitter';
class BottomPage extends React.Component{
render(){
return (
<View style={{flex:1}}>
<TouchableOpacity
onPress={()=>{
CounterEmitter.emit('addCounter');
}}>
<View style={{width:100,height:100,borderRadius:10,backgroundColor:'red',justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'white',fontSize:18}}>Add</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{marginTop:40}}
onPress={()=>{
CounterEmitter.emit('reduceCounter');
}}>
<View style={{width:100,height:100,borderRadius:10,backgroundColor:'green',justifyContent:'center',alignItems:'center'}}>
<Text style={{color:'white',fontSize:18}}>Reduce</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
export default BottomPage;
- 修改index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View
} from 'react-native';
import TopPage from './TopPage';
import BottomPage from './BottomPage';
class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<TopPage/>
<View style={{height:1,backgroundColor:'gray',width:500,marginBottom:50}} />
<BottomPage/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
最終效果
效果: 在BottomPage 中點(diǎn)擊 Add或Reduce 按鈕能使 TopPage 的數(shù)字發(fā)生改變.
