如何存储数据以在React Native的所有选项卡中使用

Question

我有一个从远程数据库下载数据并在3个不同选项卡中显示数据的应用程序。现在，我为每个标签下载了3次相同的数据，但我只想下载和更新一次。我的目标是存储数据并全局访问数据，或将其作为道具从主应用传递到选项卡。同时，我希望每隔几秒钟更新一次数据。我已经尝试过使用mobx和react hooks，但是我不知道如何将其应用于我的应用程序。

这是我在App.js中的代码：

import React, { createContext } from 'react';
import { Text } from 'react-native';

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

import 'react-native-gesture-handler';

import Motor1Screen from './screens/Motor1Screen';
import Motor2Screen from './screens/Motor2Screen';
import Motor3Screen from './screens/Motor3Screen';

import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';

export const TabNavigator = createBottomTabNavigator(
  {
    "G1": Motor1Screen,
    "G2": Motor2Screen,
    "G3": Motor3Screen,
  },
  {
    tabBarOptions: {
      activeBackgroundColor: "rgba(16,110,242,1)",
      shifting: true,
      style: {
        backgroundColor: '#f7f7f7',
        height: 70,
      },
    },
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarLabel: ({ focused }) => (
        focused
          ? <Text style={{ fontSize: 20, textAlign: 'center', color: 'white', marginBottom: 5, marginTop: -5 }}> {navigation.state.routeName} </Text>
          : <Text style={{ fontSize: 15, textAlign: 'center', color: 'rgba(16,110,242,1)', marginBottom: 5, marginTop: -5 }}> {navigation.state.routeName} </Text>
      ),
      tabBarIcon: ({ focused }) => (
        focused
          ? <Icon name="engine" size={35} color="white" />
          : <Icon name="engine-outline" size={30} color="rgba(16,110,242,1)" />
      ),
    }),
  },
);

const AppContainer = createAppContainer(TabNavigator);

export default class App extends React.Component {
  render() {
    return (
      <AppContainer />
    );
  }
}

这是我在其中一个屏幕中使用的代码：

import React, { useContext } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
} from 'react-native';

import GMarcha from '../components/GMarcha';
import CompNum from '../components/CompNum';
import CompOnOff from '../components/CompOnOff';

export default class Motor3Screen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      datos: []
    }
  }

  getDatos = async () => {
    try {
      const response = await fetch(`http://10.0.2.2:44325/api/Variables`);
      const json = response.ok ? await response.json() : console.log("Error");
      this.setState({ datos: json });
      console.log(this.state.datos);
    }
    catch (error) {
      console.log("Error: " + error);
    }
  }

  componentDidMount() {
    setInterval(() => {
      this.getDatos()
    }, 10000);
  }

  render() {
    return (
      <View style={styles.container}>
        <GMarcha GMarcha={this.state.datos.G3Marcha} />
        <View style={{ margin: 7 }}>
          <View style={{ flexDirection: 'row' }}>
            <View style={{ flex: 0.5 }}>
              <CompNum value={this.state.datos.G3Gripper} nom="Gripper" />
            </View>
            <View style={{ flex: 0.5 }}>
              <CompOnOff value={this.state.datos.G1Tritur} nom="Celda del robot" text1="Abierta" text0="Cerrada" icon1="lock-open" icon0="lock" />
            </View>
          </View>
        </View>
      </View>
    )
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 10,
    backgroundColor: "lightgrey"
  },
});

Answer 1

我的目标是存储数据并全局访问或将其作为道具从主应用传递至选项卡

您需要使用全局存储，例如MobX状态树，Overmind或Redux。