反応ネイティブの最初の起動を検出する方法

Question

反応したネイティブのアプリケーションの最初の起動を検出する良い方法は、搭乗/紹介画面を表示するためですか？

Answer 1

あなたのロジックは、このに従う必要があります。

class MyStartingComponent extends React.Component { 
    constructor(){ 
     super(); 
     this.state = {firstLaunch: null}; 
    } 
    componentDidMount(){ 
     AsyncStorage.getItem("alreadyLaunched").then(value => { 
      if(value == null){ 
       AsyncStorage.setItem('alreadyLaunched', true); // No need to wait for `setItem` to finish, although you might want to handle errors 
       this.setState({firstLaunch: true}); 
      } 
      else{ 
       this.setState({firstLaunch: false}); 
      }}) // Add some error handling, also you can simply do this.setState({fistLaunch: value == null}) 
    } 
    render(){ 
     if(this.state.firstLaunch === null){ 
      return null; // This is the 'tricky' part: The query to AsyncStorage is not finished, but we have to present something to the user. Null will just render nothing, so you can also put a placeholder of some sort, but effectively the interval between the first mount and AsyncStorage retrieving your data won't be noticeable to the user. 
     }else if(this.state.firstLaunch == true){ 
      return <FirstLaunchComponent/> 
     }else{ 
      return <NotFirstLaunchComponent/> 
     } 
} 

はそれが私がmartinarroyoの提案にいくつかの調整をした

Answer 2

に役立ちます願っています。 AsyncStorage.setItemはboolではなく文字列値を設定する必要があります。

import { AsyncStorage } from 'react-native'; 

const HAS_LAUNCHED = 'hasLaunched'; 

function setAppLaunched() { 
    AsyncStorage.setItem(HAS_LAUNCHED, 'true'); 
} 

export default async function checkIfFirstLaunch() { 
    try { 
    const hasLaunched = await AsyncStorage.getItem(HAS_LAUNCHED); 
    if (hasLaunched === null) { 
     setAppLaunched(); 
     return true; 
    } 
    return false; 
    } catch (error) { 
    return false; 
    } 
} 

この機能は、必要なときにいつでもインポートできます。 Async関数がAsyncStorageをチェックするのを待っている間に、null（または何か巧妙なもの）をレンダリングする必要があることに注意してください。

import React from 'react'; 
import { Text } from 'react-native'; 
import checkIfFirstLaunch from './utils/checkIfFirstLaunch'; 

export default class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     isFirstLaunch: false, 
     hasCheckedAsyncStorage: false, 
    }; 
    } 

    async componentWillMount() { 
    const isFirstLaunch = await checkIfFirstLaunch(); 
    this.setState({ isFirstLaunch, hasCheckedAsyncStorage: true }); 
    } 

    render() { 
    const { hasCheckedAsyncStorage, isFirstLaunch } = this.state; 

    if (!hasCheckedAsyncStorage) { 
     return null; 
    } 

    return isFirstLaunch ? 
     <Text>This is the first launch</Text> : 
     <Text>Has launched before</Text> 
    ; 
    } 
}