Navigator和AsyncStorage响应本机

用户名

您好,我是React Native的新手,目前了解AsyncStorage。

我想实现条件渲染导航器。如果AsyncStorage中有值键,则初始路由转到Page2,如果AsyncStorage中没有值键,则初始路由转到Page1。

如果我关闭应用程序并再次重新打开,我希望它向我显示相应页面上是否有键。请帮忙。

到目前为止,这是我所做的:

import React, { Component } from 'react';
import {
  AppRegistry,
  TextInput,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity,
  AsyncStorage,
} from 'react-native';
 var initialRoute = {id: 1}
var STORAGE_KEY = '@AsyncStorageExample:key';

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;

var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {
  snapVelocity: 8,
  edgeHitWidth: SCREEN_WIDTH,
});

var CustomSceneConfig = Object.assign({}, BaseConfig, {
  springTension: 100,
  springFriction: 1,
  gestures: {
    pop: CustomLeftToRightGesture,
  }
});

var Page1 = React.createClass({


  _goToPage2() {
    AsyncStorage.setItem(STORAGE_KEY, "this is the key");
    this.props.navigator.push({id: 2})
  },

  render() {
    return (
      <View style={[styles.container, {backgroundColor: 'white'}]}>
        <Text style={styles.welcome}>
          This is Page 1
        </Text>
        <TouchableOpacity onPress={this._goToPage2}>
          <View style={{paddingVertical: 2, paddingHorizontal: 7, backgroundColor: 'black'}}>
            <Text style={styles.buttonText}>Save Key</Text>
          </View>
        </TouchableOpacity>
       </View>
    )
  },
});

var Page2 = React.createClass({
  componentDidMount() {
    this._loadInitialState();
  },

  async _loadInitialState() {
    try {
      var value = await AsyncStorage.getItem(STORAGE_KEY);
      if (value !== null){
        this.setState({selectedValue: value})
      } else {
      }
    } catch (error) {
    }
  },

   getInitialState() {
    return {
      selectedValue: null
    };
  },

  _signOutPressed(){
    AsyncStorage.removeItem(STORAGE_KEY);
    this.props.navigator.push({id: 1})
  },

  render() {
    if(this.state.selectedValue === null) {
      begin = <Page1 />
    } else{
      begin = <View style={[styles.container, {backgroundColor: 'white'}]}>
          <Text style={styles.welcome}>This is Page 2</Text>
          <Text>KEY: {this.state.selectedValue}</Text>
          <TouchableOpacity onPress={this._signOutPressed}>
          <View style={{paddingVertical: 2, paddingHorizontal: 7, margin: 10, backgroundColor: 'black'}}>
            <Text style={styles.buttonText}>Delete Key</Text>
          </View>
        </TouchableOpacity>
      </View>
    }
    
      
     return (
      begin
    );
  },
});

var TestAsync = React.createClass({

  _renderScene(route, navigator) {
    if (route.id === 1) {
      return <Page1 navigator={navigator} />
    } else if (route.id === 2) {
      return <Page2 navigator={navigator} />
    }
  },

  _renderScene1(route, navigator) {
    if (route.id === 1) {
      return <Page1 navigator={navigator} />
    } else if (route.id === 2) {
      return <Page2 navigator={navigator} />
    }
  },

  _configureScene(route) {
    return CustomSceneConfig;
  },

  render() {
      var initialRoute = {id:1}
      if(AsyncStorage.getItem(STORAGE_KEY) != null){
        initialRoute = {id:2}
      }
      return(
        <Navigator
          initialRoute={initialRoute}
          renderScene={this._renderScene}
          configureScene={this._configureScene} />
      );
        
    }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'black',
  },
  buttonText: {
    fontSize: 14,
    textAlign: 'center',
    margin: 10,
    color: 'white',
  },
  default: {
    height: 26,
    borderWidth: 0.5,
    fontSize: 13,
    padding: 4,
    marginHorizontal:30,
    marginBottom:10,
  },
});

module.exports = TestAsync;

阿比舍克

您可以在TestAsync类中执行类似的操作

render() {
    var initialRoute = {id:1}
    if(AsyncStorage.getItem(STORAGE_KEY) != null){
       initialRoute = {id:2}
    }
    return(
       <Navigator
        initialRoute={initialRoute}
        renderScene={this._renderScene}
        configureScene={this._configureScene} />
    );
}

对于“无法读取未定义的属性推送”错误

在您的render方法中的page2代码中,您需要传递导航器的引用

代替

 if(this.state.selectedValue === null) {
      begin = <Page1} />
 }

用这个

 if(this.state.selectedValue === null) {
      begin = <Page1 navigator={this.props.navigator} />
 }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

反应DrawerLayoutAndroid和Navigator之间的本机冲突

来自分类Dev

在本机中擦除AsyncStorage

来自分类Dev

响应本机内联样式和性能

来自分类Dev

响应本机视图和Flexbox视图

来自分类Dev

响应本机负载CSS和JS Webview

来自分类Dev

反应本机响应边距和填充

来自分类Dev

使用componentWillMount和componentDidMount来响应本机setState(…)警告

来自分类Dev

使用Next JS和React Navigation响应本机Web

来自分类Dev

反应本机AsyncStorage getItem返回承诺不值

来自分类Dev

响应本机useContex

来自分类Dev

响应本机IosPushNotification错误

来自分类Dev

响应本机表单请求

来自分类Dev

反应navigator.replace()的本机过渡动画

来自分类Dev

登录页面和用于响应本机的用户模块的最佳预建组件?

来自分类Dev

Android和IOS creat中的Toast警报响应本机博览会

来自分类Dev

使用Expo-localization和i18n-js响应本机项目

来自分类Dev

使用RESTful API和Redux状态管理来响应本机CRUD

来自分类Dev

使用NDK限制来响应本机和Android 7支持

来自分类Dev

响应本机搜索过滤器,使用搜索和列表打开模态以进行选择

来自分类Dev

设置边框以响应本机TextInput

来自分类Dev

用Jest响应本机测试

来自分类Dev

响应本机Flex样式问题

来自分类Dev

响应本机多组件表单

来自分类Dev

每秒响应本机更改颜色

来自分类Dev

反应本机:链异步调用。例如到AsyncStorage?

来自分类Dev

如何在本机反应中从 asyncStorage 中删除单个项目?

来自分类Dev

setState 在 AsyncStorage 中无法在本机反应中工作?

来自分类Dev

反应本机中的 AsyncStorage.getItem 不起作用

来自分类Dev

我们可以使用try和catch块来防止在响应本机时出现红屏死机吗

Related 相关文章

热门标签

归档