ios - 如何将模拟器上显示的 json 数据保存到本地存储(React-native)
问题描述
我正在使用 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>
);
}}
如何将我的第二个屏幕数据存储到本地存储?有没有办法做到这一点?我以前从未这样做过,例如在本地存储数据。我什至浏览了几个教程并在网上查看,但无法弄清楚。任何帮助表示赞赏。
解决方案
要在本地存储数据,可以使用 React Native AsyncStorage 获取保存的数据:getItem()。你也可以使用 Redux 的 store 功能。创建 Redux 存储时,向 createStore 函数传递一个包含应用程序根 reducer 的 persistReducer。创建 store 后,将其传递给persistStore 函数,该函数可确保您的 redux 状态在发生更改时保存到持久化存储中。store,
推荐阅读
- javascript - 以 Angular 反应形式验证输入的正则表达式
- authentication - 如何制作用户身份验证系统,以便将每个用户分别重定向到他/她自己的门户
- c# - 如何在excel文件中设置有效期
- flutter - 如何针对不同的屏幕尺寸缩放 Flutter Gridview 内容
- javascript - 将道具添加到作为道具传递的 React 组件?
- python - 设置 nan 值数据框时的警告
- javascript - 显示表数据时不断获取“未定义的地图”,React 挂钩
- python - 如何使用 Pyinstaller 创建的可执行 python 解决“jinja2.exceptions.TemplateNotFound: html.tpl”
- html - svg 无限波动画
- amazon-web-services - 使用 Twilio 从 S3 发送 VCard 时出错