在React Native中關閉警報

Question

所以我有一個應用程序，當您閑置幾秒鍾時會顯示警報，當您按下警報時，警報中有一個“是”按鈕，它將刷新計時器並再次顯示警報，如果我對警報轉到下一頁警報仍在下一頁中打開，我希望將其關閉。 反正有關閉嗎？ 提前致謝

這是我的代碼

 componentDidMount(){ this.timer = setTimeout(this.sessionTimeout, 3000); //auto reset after 60 seconds of inactivity } componentWillUnmount(){ clearTimeout(this.timer); } sessionTimeout(){ this.timer = setTimeout(this.onSubmit, 3000) Alert.alert('You ran out of time', 'still editing?', [ {text: 'YES', onPress:this.resetTimer.bind(this)} ], {cancelable: false} ) } resetTimer(){ clearTimeout(this.timer); this.timer = setTimeout(this.sessionTimeout, 3000); } onSubmit() { clearTimeout(this.timer); this.setState({ submitted: true }); //shows activity indicator const data = this.state; const result = validate(data, this.props.validationLang); if (!result.success) { this.setState({ error: result.error }); this.setState({ submitted: false }); //terminate activity indicator } else this.props.onSubmit(this.extractData(data), () => this.setState({ submitted: false })); } 

Answer 1

您可以像這樣使用react-native-modalbox ：

    modal = null;

    render(){
       return (
         <Modal
           ref={(ref) => { this.modal = ref }}
           coverScreen={true}
           position={"center"}
           onClosed={() => { console.log('modal closed') }}
           swipeToClose={true} 
           backdropPressToClose={true} >
           <View>
              <Text>Message</Text>
              <TouchableOpacity 
                  onPress={() => { this.modal.close() }}
              >
                  <Text>close</Text>
              </TouchableOpacity>
           </View>
         </Modal>
       )
   }

現在，您可以使用this.modal.open()顯示模態，並使用this.modal.open()關閉模態，並使用Modal組件的props跟蹤閉合模態。 有關更多信息，請閱讀文檔 。

我希望這可以使你高興。

Answer 2

無法關閉“警報”，因此您可以通過在警報內部設置“否”按鈕來更改導航方案，並僅在不按任何按鈕后不按任何操作即可導航到另一個屏幕，它應該停留在該屏幕上，您可以設置按鈕名稱對於任何事情，而不是對用戶有意義的“否”，那么如果我不想通過按“是”來刷新計時器，則可以導航到其他屏幕。

Answer 3

在出現警報時重置，請按OK ，按No ，希望屏幕移動。

       Alert.alert('You ran out of time', 'still editing?',
        [
          {text: 'YES', onPress: () => this.resetTimer()},
                {
                  text: "Cancel",
                  onPress: () => this.props.navigation.navigate("nextScreen"),
                  style: "cancel"
                }
        ],
        {cancelable: false}
        )