localstorageを使用してReactまたはReact Nativeでコンポーネントを1回だけ表示する

Question

localstorgeを使用して画面コンポーネントを1回だけ表示しようとしているところです。これは私を精神的に運転しています。あなたは少しcomponentDidMount実装を変更し、あなたのバベルのプリセットに非同期/のawaitサポートが含まれている場合、あなたが作ることができるところで、コンポーネントの状態に

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/> 
} 

を別のフラグを追加する必要があります

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

このコード方法は簡単です

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

あなたは値のためにストレージをチェックしています。値を取得した後、状態を設定して画面を表示します。つまり、まだ画面が表示されていないことを確認した後で、画面コンポーネントを開く必要があります。