Как хранить данные для использования на всех вкладках в React Native

Question

У меня есть приложение, которое загружает данные из удаленной базы данных и отображает эти данные на 3 разных вкладках. Сейчас я загружаю одни и те же данные 3 раза для каждой вкладки, но хочу загрузить и обновить их только один раз. Моя цель - хранить данные и получать к ним глобальный доступ или передавать их в виде реквизитов из основного приложения на вкладки. В то же время я хочу, чтобы данные обновлялись каждые несколько секунд. Я пытался использовать мобксы и реагирующие хуки, но я не знаю, как применить это к моему приложению.

Это код, который у меня есть в приложении. 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 State Tree, Сверхразум или Redux.