Zeigen Sie Komponente nur einmal in Reagieren oder Reagieren Native mit Localstorage

Question

Ich habe die folgende Situation, in der ich versuche, eine Bildschirmkomponente nur einmal und nur einmal mit Localstorge zu zeigen. Dieser macht mich verrückt.

App.js

... 

constructor(props) { 
    super(props); 
    this.state = { 
     isLoading: false, 
    }; 
    } 

    componentDidMount() { 
    if (AsyncStorage.getItem('key')) { 
     AsyncStorage.getItem('key', (value) => { 
     this.setState({isLoading: value}) 
     Alert.alert(JSON.stringify(value)) 
     }); 
     AsyncStorage.setItem('key', JSON.stringify(true)) 
    } 
    } 

    render() { 
    if (!this.state.isLoading) { 
     return <Search /> 
    } 
    return <Root /> 
    } 

... 

Answer 1

Sie müssen leicht componentDidMount Implementierung ändern und Staat eine andere Flagge Komponente

constructor() { 
    ... 
    this.state = { 
     isLoaded: false, 
     wasShown: false 
    } 
} 

componentDidMount() { 
    AsyncStorage.getItem('key') // get key 
    .then(wasShown => { 
     if(wasShown === null) { // first time 
      // we need to save key for the next time 
      AsyncStorage.setItem('key', '"true"') 
     } 

     this.setState({isLoaded: true, wasShown}) 
     }) 
    } 

render() { 
    const { isLoaded, wasShown } = this.state 

    // you can't tell if this component was shown or not render nothing 
    if(!isLoaded) { return null } 

    if(!wasShown) { 
    return <Search /> 
    } 

    return <Root/> 
} 

BTW hinzufügen, wenn Sie umfassen async/await Unterstützung für Ihre babel Presets könnten Sie machen Dieser Code Weg einfacher

async componentDidMount() { 
    const wasShown = await AsyncStorage.getItem('key') // get key 

    if(wasShown === null) { 
    await AsyncStorage.setItem('key', '"true"') 
    } 

    this.setState({isLoaded: true, wasShown} 
    } 

Answer 2

Zeigen Sie etwas anderes w Wenn Sie den Speicher auf Wert prüfen. Nachdem Sie den Wert erreicht haben, setzen Sie den Status und zeigen Sie Ihren Bildschirm. Mit anderen Worten, Sie sollten Ihre Bildschirmkomponente erst dann öffnen, wenn Sie sicher sind, dass Sie den Bildschirm noch nicht angezeigt haben.