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

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

这是我在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，{createContext}来自“React”；
从“react native”导入{Text}；
从“反应本机矢量图标/材料通信图标”导入图标；
导入“反应本机手势处理程序”；
从“./screens/Motor1Screen”导入Motor1Screen；
从“./screens/Motor2Screen”导入Motor2Screen；
从“./screens/Motor3Screen”导入Motor3Screen；
从“反应导航选项卡”导入{CreateBoottomTabNavigator}；
从“react navigation”导入{createAppContainer}；
export const TabNavigator=createBottomTabNavigator(
{
“G1”：马达1屏幕，
“G2”：马达2屏幕，
“G3”：电机3屏幕，
},
{
选项卡选项：{
activeBackgroundColor:“rgba（16110242,1）”，
是的，
风格：{
背景颜色：“#f7f7f7”，
身高：70，
},
},
defaultNavigationOptions:（{navigation}）=>({
tabBarLabel:（{focused}）=>(
专注
？{navigation.state.routeName}
：{navigation.state.routeName}
),
tabBarIcon:（{focused}）=>(
专注
? 
: 
),
}),
},
);
const AppContainer=createAppContainer（TabNavigator）；
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}

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

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"
  },
});

import React，{useContext}来自“React”；
进口{
安全区域视图，
样式表，
滚动视图，
看法
}从“反应本机”；
从“../components/GMarcha”导入GMarcha；
从“../components/CompNum”导入CompNum；
从“../components/CompOnOff”导入CompOnOff；
导出默认类Motor3屏幕扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
达托斯：[]
}
}
getDatos=async（）=>{
试一试{
const response=等待获取(`http://10.0.2.2:44325/api/Variables`);
const json=response.ok？wait response.json（）：console.log（“错误”）；
this.setState（{datos:json}）；
console.log（this.state.datos）；
}
捕获（错误）{
日志（“错误：+错误”）；
}
}
componentDidMount（）{
设置间隔（（）=>{
这是getDatos（）
}, 10000);
}
render（）{
返回(
)
}
};
const styles=StyleSheet.create({
容器：{
弹性：10，
背景颜色：“浅灰色”
},
});

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

---

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

使用异步存储您可以在设备中本地存储数据，并在所有应用程序中的任何位置使用数据