React Native 和 MobX：如何在 Counter App 中实现 MobX？

如何解决React Native 和 MobX：如何在 Counter App 中实现 MobX？

我一直在尝试将这个 useState Counter 应用程序转换为 MobX Counter 应用程序。但是我在网上找不到可靠的例子。

无论如何可以告诉我这样做的方法吗？

App.js

import {Button,StyleSheet,Text,View} from 'react-native';
import React,{useState} from 'react';

import CounterStoreContext from './src/CounterStoreContext';
import {observable} from 'mobx';
import {observer} from 'mobx-react';

// --

const App = () => {
  const [count,setCount] = useState(0);
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to React Native!</Text>
      <Text style={styles.instructions}>To get Started,edit App</Text>
      <Text style={styles.instructions}>{count}</Text>
      <Button title="increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#f5fcff',},welcome: {
    fontSize: 20,textAlign: 'center',margin: 10,instructions: {
    fontSize: 16,margin: 20,});

export default App;

CounterStoreContext.js（我在网上找到但没用的东西）

import {createContext} from 'react';
import {observable} from 'mobx';

class CounterStore {
  @observable count = 0;
}

export const CounterStoreContext = createContext(new CounterStore());

我期待着您的来信。谢谢。