Navigator 和 AsyncStorage 反应原生

Posted 2023-03-15

【中文标题】Navigator 和 AsyncStorage 反应原生

【英文标题】：Navigator & AsyncStorage react native

【发布时间】：2016-07-14 06:07:07

【问题描述】：

您好，我是 react native 的新手，目前正在学习 AsyncStorage。

我想实现条件渲染导航器。如果AsyncStorage中有value key，初始路由到Page2，如果AsyncStorage没有value key，初始路由到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;

【参考方案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 />
    );

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

在渲染方法中的 page2 代码中，您需要传递导航器的引用

代替

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

使用这个

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

【讨论】：

解决了！非常感谢@abhishek

哦，等等，在第 1 页中，当我触摸“保存密钥”按钮时，它会显示错误“无法读取未定义的属性 push”。有什么解决办法吗？

可能你的导航器引用没有在 props 中设置。你能更新你的代码吗？

【参考方案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>
  );