Làm thế nào để phát hiện ra mắt đầu tiên trong phản ứng bản địa

Question

một cách tốt để phát hiện ra mắt đầu tiên và ban đầu của một ứng dụng bản địa phản ứng, để hiển thị một màn hình on-boarding/giới thiệu là gì?

Answer 1

Logic của bạn nên làm theo điều này:

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

Hy vọng nó giúp

Answer 2

tôi đã thực hiện một số điều chỉnh để đề nghị martinarroyo của. AsyncStorage.setItem nên đặt giá trị chuỗi và không phải là giá trị 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; 
    } 
} 

Chức năng này sau đó có thể được nhập bất cứ nơi nào bạn cần. Lưu ý rằng bạn nên render null (hoặc một cái gì đó thông minh khác) trong khi đợi hàm async để kiểm tra AsyncStorage.

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