React Native 使用Mobx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { observer } from 'mobx-react';
 
// 假设存在一个CounterStore，包含currentCount和increment方法
import counterStore from './counterStore';
 
@observer
class CounterDisplay extends React.Component {
  // 使用装饰器语法糖来定义方法
  increment = () => {
    counterStore.increment();
  };
 
  render() {
    return (
      <View style={styles.container}>
        <Text onPress={this.increment}>
          点击我增加计数器: {counterStore.currentCount}
        </Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
 
export default CounterDisplay;

这个例子展示了如何在React Native应用中使用MobX来创建一个响应式的计数器组件。CounterDisplay类通过observer装饰器标记为响应式组件，这意味着当相关的MobX可观察对象（在这个例子中是counterStore）发生变化时，组件的渲染会自动更新。increment方法被定义为一个箭头函数，确保this正确地指向组件实例。