RN中通过 callback 改变 state
Introduction:
TestNetwork中有两个按钮，点击后在testNetworkModel中请求到数据后，通过callback回传，改变state并显示。
class testNetworkModel {
constructor(codeCallback, mailCallback) {
this.cCallback = codeCallback; // 验证码图片的回调
this.eCallback = mailCallback; // 邮箱信息的回调
}
cCallback:Function = null;
eCallback:Function = null;
getCheckCode = () => {
NetWorkTool.getCheckCode(
(res) => {
if (res && res.data && res.data.captcha) {
if (this.cCallback && typeof this.cCallback === 'function') {
this.cCallback(res.data.captcha);
}
}
}, (err) => {
console.log('code err:', err);
}
)
};
getUserInfo = (token) => {
NetWorkTool.getUserInfo(token, (res) => {
if (res && res.data.user.email) {
if (this.eCallback && typeof this.eCallback === 'function') {
this.eCallback(res.data.user.email);
}
}
}, (err) => {
console.log(err);
});
};
}
export default class TestNetwork extends Component {
constructor(props) {
super(props);
this.model = new testNetworkModel(this.getImage, this.getUserEmail);
this.state = {
imageUrl: '',
userEmail: '',
};
}
model = null;
getImage = (sourceUrl) => {
this.setState({
imageUrl: sourceUrl,
});
};
getUserEmail = (email) => {
this.setState({
userEmail: email,
});
};
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={{ fontSize: 16, marginBottom: 10 }}>获取验证码</Text>
<TouchableOpacity
activeOpacity={1.0}
onPress={this.model.getCheckCode}
style={styles.check_image_btn}
>
<Image
source={{ uri: this.state.imageUrl, cache: 'reload' }}
style={{ width: 140, height: 45 }}
resizeMode={'contain'}
/>
</TouchableOpacity>
<Text style={{ fontSize: 16, marginTop: 10 }}>获取用户信息</Text>
<TouchableOpacity
onPress={() => this.model.getUserInfo(tstToken)}
style={styles.userInfo_btn}
>
<Text style={{ textAlign: 'center' }}>{this.state.userEmail}</Text>
</TouchableOpacity>
</View>
);
}
}
点击按钮后效果：