ios - 如何将模拟器上显示的JSON数据保存到本地存储中(React-Native)

Question

我正在使用react-native和expo。我有两个屏幕。当用户单击第一个屏幕上的symbol时，例如

第一个画面:

A
acompany
B
bcompany

用户单击 A符号。我为该符号获取了一些json数据并显示在第二个屏幕上，但我希望将获取的数据保存在第二个屏幕上。但是现在，如果我返回第一个屏幕(它具有一些json数据，例如符号名称A及其代表的公司等，如上所述)，然后返回第二个屏幕，数据将消失。有什么方法可以将 second screen的数据存储到本地存储中？我对第二类要存储在本地存储中的行发表了评论

我的第二堂课:

import React, { useState, useEffect } from "react";
import {
  TouchableWithoutFeedback,
  Keyboard,
  FlatList,
  TextInput,
  Button,
  Text,
} from "react-native";
import {
  StyleSheet,
  View 
} from "react-native";
import { useStocksContext } from "../contexts/StocksContext";
import { scaleSize } from "../constants/Layout";


export default function StocksScreen({ route }) {
  const { ServerURL, watchList } = useStocksContext();
  const [state, setState] = useState({
    myListData: [],

  });

  const { stuff } = route.params;


  renderWithData = () => {
    return fetch(`http://131.181.190.87:3001/history?symbol=${stuff}`)
      .then((res) => res.json())
      .then((json) => {
        setState({
          isLoaded: true,
          myListData: json,
        });


      });
  };




  useEffect(() => {
    renderWithData();

  }, [watchList]);


  let item = state.myListData.length && state.myListData[0];


 //that's the data I would like to save on local storage (movie)
 let movie = (
  <View  style={styles.text}>
   <Text style={styles.text} key={item.symbol}>
      {item.high}
    </Text>

    <Text style={styles.text} key={item.symbol}>
      {item.close}
    </Text>


  </View>
)


  return (
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    <View style={styles.container}>
      <Text style={styles.text}>bb</Text>
      <View>{movie}</View>

      </View>
        </TouchableWithoutFeedback>

   );
}



const styles = StyleSheet.create({
  text: {
    color: "black",
    backgroundColor: "white",
  },
});

第三类:在这里我想将数据保存到本地存储

import React, { useState, useContext, useEffect } from "react";
import { AsyncStorage } from "react-native";

const StocksContext = React.createContext();

export const StocksProvider = ({})


  const [state, setState] = useState([]);

  return (
    <StocksContext.Provider value={[state, setState]}>

    </StocksContext.Provider>
  );

}}

如何将第二个屏幕数据存储到本地存储中？有什么办法吗？我从来没有做过此事，例如在本地存储数据。我什至经历了一些教程，并在网上看了一下，但不知道。任何帮助表示赞赏。

Answer 1

要在本地存储数据，可以使用React Native AsyncStorage来获取保存的数据:getItem()。您也可以使用Redux的存储功能。在创建Redux存储时，请为您的createStore函数传递一个wrapperReducer，以包装应用程序的根reducer。创建商店后，将其传递给persistStore函数，该函数可确保您的redux状态在更改时保存到持久性存储中。