Question

您好我是本地新人，现在了解AsyncStorage。

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

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

这是我到目前为止所做的事情：

＆＃13;

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;

＆＃13;

Answer 1

你可以在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} />
 }

Answer 2

如果有人使用React Navigation version 5，

检查以下代码。可能有帮助

function MyStack() {
  const [isLogedin, setIsLogedin] = React.useState(false);

  AsyncStorage.getItem('isLogedin').then((data) =>{
    if(data != null && data == true) setIsLogedin(true)
    else setIsLogedin(false)
  })

  return (
    <Stack.Navigator headerMode={"none"}>
      {isLogedin ? <Stack.Screen name="Home" component={AppTabs} /> : <Stack.Screen name="AuthNav" component={AuthNav} />}
    </Stack.Navigator>
  );
}

导航仪和AsyncStorage反应原生

2 个答案: