javascript - (React Native) 当用户第一次打开这个 App 时，Modal 只会向每个用户显示一次

Question

我很难理解“AsyncStorage”。 这对我来说很难理解，因为我现在是一名初级工程师。 但我想知道如何在用户拥有的本地设备中保留一些数据。

我可以在哪里使用

 _storeData = async () => {
   try {
   await AsyncStorage.setItem('@MySuperStore:key',  'I like to save 
    it.');
  } catch (error) {
   // Error saving data
 }
} 

和

  _retrieveData = async () => {
   try {
   const value = await AsyncStorage.getItem('TASKS');
   if (value !== null) {
    // We have data!!
    console.log(value);
  }
 } catch (error) {
   // Error retrieving data
 }
}

顺便说一句，在我的应用程序中，我尝试制作一些用户输入一些数据的表单，但每个用户都可以将这些数据保存在每个表单上，然后如果用户之前会更改文档用户输入，他可以更改它。

除此之外，用户的数据都在 firebase firestore 上。

Answer 1

你可以使用这个例子来实现“Open modal first time app run”

class ModalExample extends Component {

  constructor(props) {
    super(props)
    state = {
      modalVisible: false,
    };
  }

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  checkIfNeedOpenModal = async () => {
    try {
      const isFirstOpen = await AsyncStorage.getItem('IS_FIRST_OPEN');
      if (!isFirstOpen || isFirstOpen !== 'true') { // Check if key IS_FIRST_OPEN doesnt have value or not 'true'
        // isFirstOpen is null or not 'true' so this is first time app open

        this.setModalVisible(true)
      }
     } catch (error) {
       // Error retrieving data
     }
  }

  saveModalOpen = async () => {
    try {
      await AsyncStorage.setItem('IS_FIRST_OPEN', 'true');
    } catch (error) {
      // Error saving data
    }
  }
  onModalShow = () => {
    this.saveModalOpen()
  }

  componentDidMount() {
    this.checkIfNeedOpenModal()
  }

  render() {
    return (
      <View style={{marginTop: 22}}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onShow={this.onModalShow}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}