React Native中使用mobx

在React Native中使用MobX，你需要安装MobX相关的包，并且设置你的项目以使用MobX。以下是一个简单的例子：

1. 安装MobX相关的包：

npm install mobx mobx-react-lite

或者使用yarn：

yarn add mobx mobx-react-lite

2. 创建一个MobX store：

// stores/counterStore.js
import { observable, action } from 'mobx';
 
class CounterStore {
  @observable value = 0;
 
  @action
  increment = () => {
    this.value += 1;
  };
 
  @action
  decrement = () => {
    this.value -= 1;
  };
}
 
const counterStore = new CounterStore();
export default counterStore;

3. 在React组件中使用MobX store：

// components/Counter.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useObserver } from 'mobx-react-lite';
import counterStore from '../stores/counterStore';
 
const Counter = () => {
  const increment = () => {
    counterStore.increment();
  };
 
  const decrement = () => {
    counterStore.decrement();
  };
 
  const CounterObserver = useObserver(() => (
    <View>
      <Text>{`Counter Value: ${counterStore.value}`}</Text>
      <Button onPress={increment} title="Increment" />
      <Button onPress={decrement} title="Decrement" />
    </View>
  ));
 
  return CounterObserver;
};
 
export default Counter;

确保在入口文件（通常是 index.js）导入MobX store并使用Provider组件包裹根组件：

import { Provider } from 'mobx-react';
import counterStore from './stores/counterStore';
import App from './App';
 
const AppProvider = () => (
  <Provider counterStore={counterStore}>
    <App />
  </Provider>
);
 
export default AppProvider;

这样就设置了一个简单的MobX store，并在React Native组件中使用了它。