RN: 模拟 Mobx
前言
看过 [React Native 使用 Mobx] 这篇博客的同学, 对 Mobx 应该有了一个简单直观的认识.
其实, 我们完全可以使用 RN 中的 State 来达到同样的效果.
今天的主要内容是使用 State 来模拟 Mobx, 也算是对 Mobx 的进一步认识.
效果
实现效果和 [React Native 使用 Mobx] 中的效果一致, 只是代码没有使用 Mobx 框架.
实现
LegacyCounter.js
Add 和 Minus 两个按钮分别触发各自的回调, 来更新 state.
使用 state 的变化来到达更新 View (计数的 Text 会相应的做出变化)的目的.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
| /** * 模拟 Mobx 在 ReactNative 上的一个小例子. * * state -> view */ 'use strict'; import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableHighlight } from 'react-native'; class LegacyCounter extends Component { //构造方法 constructor(props) { super(props); this.state = { //计数 counter: 0 }; } render () { return ( <View style = {styles.container}> {/*加一*/} <TouchableHighlight onPress = {() => {this.setState({ counter: ++this.state.counter })}}> <Text>Add</Text> </TouchableHighlight> {/* 显示处理结果 */} <Text style = {styles.resultTxtStyle}> {this.state.counter} </Text> {/*减一*/} <TouchableHighlight onPress = {() => {this.setState({ counter: --this.state.counter })}}> <Text>Minus</Text> </TouchableHighlight> </View> ); } } export default class LegacyComponent extends Component { render () { return ( <View style = {{flex: 1, marginTop: 64}}> <LegacyCounter/> </View> ); } } /* 样式定义 */ const styles = StyleSheet.create({ container: { flexDirection: 'row', justifyContent: 'space-around' }, resultTxtStyle: { fontSize: 22, color: 'red' } });
|
index.ios.js
这个文件很简单, 只是调用 LegacyCounter 中的组件.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| import React, { Component } from 'react'; //引入自定义模块 import LegacyComponent from './js/Mobx/LegacyCounter' import { AppRegistry } from 'react-native'; class RNMobxDemo extends Component { render() { return( <LegacyComponent/> ); } } AppRegistry.registerComponent('RNMobxDemo', () => MZRNTutorial);
|
后记
如果你想了解更多关于 RN 中 State 的知识, 请移步官方文档查阅 State 的用法.
后续会给大家带来更多关于 RN 这些方面的东西.