React native和MobX:如何创建全局存储？

React Native是一种用于构建跨平台移动应用的开发框架，而MobX是一个用于状态管理的库。在React Native中，可以使用MobX来创建全局存储。

要创建全局存储，首先需要安装并引入MobX库。可以使用以下命令安装MobX：

npm install mobx mobx-react --save

接下来，创建一个存储类，该类将包含应用程序的全局状态。可以在该类中定义各种状态和操作。例如，假设我们要创建一个名为AppStore的全局存储类，可以按照以下方式创建：

import { observable, action } from 'mobx';

class AppStore {
  @observable
  counter = 0;

  @action
  increment() {
    this.counter++;
  }

  @action
  decrement() {
    this.counter--;
  }
}

export default new AppStore();

在上面的示例中，我们创建了一个AppStore类，其中包含一个名为counter的可观察状态和两个操作increment和decrement。@observable装饰器用于标记状态，@action装饰器用于标记操作。

接下来，在应用程序的入口文件中，将全局存储类与React Native应用程序进行绑定。可以按照以下方式完成：

import React from 'react';
import { Provider } from 'mobx-react';
import AppStore from './AppStore';
import App from './App';

const Root = () => (
  <Provider appStore={AppStore}>
    <App />
  </Provider>
);

export default Root;

在上面的示例中，我们使用Provider组件将AppStore传递给应用程序的根组件App。这样，整个应用程序都可以访问AppStore中定义的状态和操作。

现在，在应用程序的任何组件中，都可以通过使用@inject和@observer装饰器来访问全局存储。例如，假设我们有一个名为Counter的组件，可以按照以下方式使用全局存储：

import React from 'react';
import { View, Text, Button } from 'react-native';
import { inject, observer } from 'mobx-react';

@inject('appStore')
@observer
class Counter extends React.Component {
  render() {
    const { appStore } = this.props;

    return (
      <View>
        <Text>Counter: {appStore.counter}</Text>
        <Button title="Increment" onPress={() => appStore.increment()} />
        <Button title="Decrement" onPress={() => appStore.decrement()} />
      </View>
    );
  }
}

export default Counter;

在上面的示例中，我们使用@inject('appStore')装饰器将appStore注入到Counter组件中，并使用@observer装饰器使组件成为观察者，以便在状态更改时自动重新渲染。

这样，我们就成功地创建了一个全局存储，并在React Native应用程序中使用了它。通过使用MobX，我们可以轻松地管理和共享应用程序的状态。

腾讯云相关产品和产品介绍链接地址：