关键词:
【中文标题】尝试在 React Native 中实现 AsyncStorage 时遇到问题【英文标题】:Having trouble trying to implement AsyncStorage in React Native 【发布时间】:2015-07-28 17:07:20 【问题描述】:我正在使用 react native 来构建应用程序,我遇到的唯一问题是我有一个进度条来跟踪用户的进度,但是当我完全关闭应用程序并重新打开它时,一切都会重置为原始状态数据。所以我求助于 AsyncStorage 来保存我的数据,但我在试图弄清楚如何在我的代码中使用它时遇到了麻烦,如果有人能提供帮助,那就太好了。
*更新: 我尝试实现异步存储,当我完全关闭应用程序时数据似乎一直存在,但我有它,所以每次按下按钮时进度条都会上升 %20,例如,如果它在 %80 并且我重新加载应用程序它将显示为 %60,我想知道是否有人可以帮助我解决此问题,以在重新加载或关闭应用程序后使进度条百分比保持不变。
'use strict';
var React = require('react-native');
var ProgressBar = require('react-native-progress-bar');
var
AppRegistry,
AsyncStorage,
StyleSheet,
Text,
View,
TouchableHighlight
= React;
var styles = StyleSheet.create(
container:
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFF',
,
button:
alignSelf: 'center',
marginTop: 50,
width: 100,
height: 50,
backgroundColor: '#0059FF',
borderRadius: 8,
borderWidth: 2,
borderColor: '#0059FF'
,
buttonClear:
alignSelf: 'center',
marginTop: 10,
width: 100,
height: 50,
backgroundColor: '#3B3A3A',
borderRadius: 8,
borderWidth: 2,
borderColor: '#3B3A3A'
,
buttonText:
fontSize: 18,
textAlign: 'center',
lineHeight: 33,
color: '#FFF',
);
var PROGRESS = 0;
class BasicStorageExample extends React.Component
constructor(props)
super(props);
this.state =
progress: PROGRESS
componentDidMount()
AsyncStorage.getItem('progressbar')
.then((value) =>
JSON.parse(value);
this.setState(
progress: value
);
console.log('Progress on load: ' + value);
)
.done();
onButtonPress()
AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))
.then(() =>
JSON.parse(PROGRESS);
this.setState(
progress: PROGRESS += 0.2
);
console.log('Progress on Button Press: ' + PROGRESS);
)
.done();
onButtonClearPress()
AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))
.then(() =>
JSON.parse(PROGRESS);
PROGRESS = 0;
this.setState(
progress: 0
);
)
.done();
render()
return (
<View style=styles.container>
<ProgressBar
fillStyle=
backgroundStyle=backgroundColor: '#cccccc', borderRadius: 2
style=marginTop: 10, width: 300
progress=this.state.progress />
<TouchableHighlight
ref="button"
style=styles.button
underlayColor='#002C7F'
onPress=this.onButtonPress.bind(this)>
<Text style=styles.buttonText>Done</Text>
</TouchableHighlight>
<TouchableHighlight
style=styles.buttonClear
underlayColor='#002C7F'
onPress=this.onButtonClearPress.bind(this)>
<Text style=styles.buttonText>Clear</Text>
</TouchableHighlight>
</View>
);
;
AppRegistry.registerComponent('BasicStorageExample', () => BasicStorageExample);
【问题讨论】:
【参考方案1】:只需调用AsyncStorage.setItem('some-id', someVar)
进行设置,然后调用AsyncStorage.getItem('some-id')
进行检索。它类似于本地存储。文档中有完整的 API 和示例:
https://facebook.github.io/react-native/docs/asyncstorage.html
【讨论】:
谢谢,我查看了 API,发现只能使用 AsyncStorage 存储字符串,你知道如何存储数字吗? 只需将 JSON 存储在其中。在 JS 中创建一个对象,然后将其序列化: JSON.stringify( myNum: 5 ) - 这将为您提供一个可以存储的字符串,然后使用 JSON.parse 将其转回一个对象。 如果有帮助,我创建了一个名为 react-native-simple-store 的超级简单模块,它包装了 AsycnStorage 并为您处理 JSON 字符串化和解析。 为什么他们在文档中使用长且最高机密的密钥名称?这是有原因的吗?【参考方案2】:用于存储数据
AsyncStorage.setItem('progressbar', JSON.stringify(PROGRESS))
用于异步获取数据调用。
async componentWillMount()
const result = await AsyncStorage.getItem('progressbar');
// you will get value. check your conditions here
【讨论】:
如何在 React Native 中实现 Twilio android 推送通知?
...ative?【发布时间】:2020-06-1112:11:46【问题描述】:我正在尝试在我的react-native应用程序中实现Twilio推送通知,但我遇到了一些错误。请帮助我,如何将通知集成到android。【问题讨论】:您能分享您遇到的错误吗 查看详情
在 react-native 组件中实现 async/await 功能
...ponent【发布时间】:2017-10-0223:08:06【问题描述】:我正在尝试实现一个函数,该函数在呈现主“App”组件之前检查用户是否已通过身份验证,但在承诺解决后我无法让我的代码运行。classAppextendsComponentrender()con 查看详情
使用 TrustKit iOS 在 react-native 应用程序中实现 ssl pinning
...KitiOS【发布时间】:2019-09-0210:34:31【问题描述】:我正在尝试在react-native应用程序(RN0.60)中实现SSLpinning,并且我正在使用Trustkit。按照https://git 查看详情
如何在 react-native-ios 中实现推送通知
】如何在react-native-ios中实现推送通知【英文标题】:HowtoimplementPushNotificationinreact-native-ios【发布时间】:2016-10-1806:40:22【问题描述】:请参考react-native-ios中PushNotification的任何分步过程。我找到了这个链接:PushNotification-react-nati... 查看详情
如何在 React Native 中实现 Google 地图以在 Web、Android 和 iOS 上运行?
...21-11-2021:26:24【问题描述】:我是ReactNative的新手,我正在尝试实现一个可用于Web、Android和iOS的地图。我在网上找到的资源是用于使用react-na 查看详情
在 React Native 中实现 Safari 视图控制器
】在ReactNative中实现Safari视图控制器【英文标题】:ImplementSafariViewControllerinReactNative【发布时间】:2019-10-2212:04:09【问题描述】:我们目前将我们的应用上传到苹果商店,得到以下答复:我们建议实现SafariViewControllerAPI以显示您... 查看详情
我们可以使用 React Native 在 jitsi meet 中实现“屏幕截图”功能吗
】我们可以使用ReactNative在jitsimeet中实现“屏幕截图”功能吗【英文标题】:Canweimplement\'ScreenShot\'featureinjitsimeetusingReactNative【发布时间】:2021-11-3004:20:29【问题描述】:我们可以使用ReactNative在jitsimeet中实现“屏幕截图”功能吗... 查看详情
使用 redux saga 在 react native 中实现令牌刷新
】使用reduxsaga在reactnative中实现令牌刷新【英文标题】:Implementtokenrefreshinreactnativewithreduxsaga【发布时间】:2020-05-2614:32:01【问题描述】:我有一个redux-saga中间件来促进异步存储操作,并且所有API调用都是通过sagas进行的。现在... 查看详情
如何在 React Native 中实现类似循环动画倒数计时器组件的 snapchat?
】如何在ReactNative中实现类似循环动画倒数计时器组件的snapchat?【英文标题】:HowtoimplementasnapchatlikecircularanimatedcountdowntimercomponentinReactNative?【发布时间】:2016-10-1817:03:25【问题描述】:我想知道是否有人知道如何在ReactNative中... 查看详情
如何在 react native 中实现 Twitter 个人资料屏幕的 UX,可折叠标题(Sticky TabBar)和可滚动选项卡?
...ollabletabs?【发布时间】:2020-05-0907:31:02【问题描述】:我尝试了react 查看详情
如何在带有 React Native Text 的 Android 中实现软连字符
】如何在带有ReactNativeText的Android中实现软连字符【英文标题】:HowtoimplementsofthypheninAndroidw/ReactNativeText【发布时间】:2019-10-1411:46:19【问题描述】:<Text>Aufmerksamkeits\'\\u00AD\'defizit</Text>这会在iOS上导致Aufmerksamkeits-赤字率... 查看详情
如何使用 rnfirebase 动态链接和身份验证模块 v6 在 React Native 中实现 signInWithEmailLink
】如何使用rnfirebase动态链接和身份验证模块v6在ReactNative中实现signInWithEmailLink【英文标题】:HowtoimplementsignInWithEmailLinkinReactNativeusingrnfirebasedynamiclinksandauthmodulesv6【发布时间】:2021-08-0310:26:52【问题描述】:我想要做什么:在重... 查看详情
添加AllInOneSDKSwiftWrapper.swift后如何在一个sdk中实现Paytm all in react native给出错误
...AllInOneSDKSwiftWrapper.swift后如何在一个sdk中实现Paytmallinreactnative给出错误【英文标题】:HowtoimplementPaytmallinonesdkinreactnativegivingerrorafteraddingAllInOneSDKSwiftWrapper.swift【发布时间】:2020-09-2105:48:46【问题描述】:我已经创建了这个AllInOneS... 查看详情
如何使用 java 后端在 react-native 中实现消息传递服务?
】如何使用java后端在react-native中实现消息传递服务?【英文标题】:Howtoimplementamessagingserviceinreact-nativewithajavabackend?【发布时间】:2018-01-2320:52:12【问题描述】:我正在创建一个应用,前端使用React-Native,后端使用Java,数据库... 查看详情
htmljavascript.groupasyntest.html-在“javascriptninja”中实现组asyn测试的优秀代码(代码片段)
如何在 React 中实现路由?
...由时遇到问题。我想我已经设置好了所有东西,但是当我尝试路由时,我导入的组件会显示在索引页面上,但我应该会看到一个新页面。我尝试定义所有路径并导入所需的组件我的注册组件exportconstSignUp=()=>(<Container 查看详情
在 React Native 组件中使用 Facebook 登录功能
...ponent【发布时间】:2020-09-1005:13:55【问题描述】:我正在尝试在我的react本机应用程序中实现Facebook登录。我正在关注本教程:https://dev.to/rishikeshvedpathak/react-native-login-with-f 查看详情
在 React.js 中实现 Read More 链接
...act.js【发布时间】:2015-07-1119:50:53【问题描述】:我正在尝试实现一个ReadMore链接,该链接扩展为显示点击后更多文字。我正在尝试以React的方式做到这一点。<!--html--><divclass="initialText">LoremIpsumissimplydu 查看详情