Question

我有一个按钮，当点击它时会显示一个烤面包机，直到发生任何事情关闭它或显示另一个带有错误信息。

第一次加载屏幕时效果很好，但是如果我再次按下按钮，初始吐司就不显示了。错误吐司确实在几秒钟后显示（假设有错误）。这两者之间的唯一区别是，最初的一个具有持续时间。此外，由于它永远存在，我正在使用toast.close来停止显示它。

我甚至决定为初始制作一个组件，为错误制作一个组件，但同样的事情发生。

具有Toast代码的组件

showToast(text){
   this.refs.toast.show(text);
}

showToastForever(text) {
   this.refs.toast.show(text, DURATION.FOREVER);
}

closeToast(){
   this.refs.toast.close();
}

render(){
   return(
      <Toast ref="toast"
      style={{backgroundColor: 'black'}}
      position='bottom'
      positionValue={150}
      />
   )
}

扩展上面代码的组件

displayToast(text){
   if(text == 'detecting location...'){
      this.showToastForever(text)
   } else{
        this.closeToast()
        this.showToast(text)
   }
}

hideToast(){
   this.closeToast()
}

myRender(){
   return(
      <View>
         <SearchLocation
         callbackToaster={ this.displayToast }
         callbackHide={ this.hideToast }
         />
      </View>
   )
}

SearchLocation

myRender(){
   return(
      <View>
         <TouchableOpacity onPress={() => this.checkLocation()}>
         //icon and styles
         </TouchableOpacity>

         //other irrelevant stuff

      </View>
   )
}

checkLocation(){
   this.props.callbackToaster('detecting location...')
   this.requestLocationPermission()
}

async requestLocationPermission() {
   if(!permission){
      //ask phone for permissions
   } else{
      this.getCurrentLocation();
   }
}

getCurrentLocation() {
   RNGooglePlaces.getCurrentPlace()
   .then((results) => {
      this.props.callbackHide()

      //other stuff about displaying results

   })
   .catch((error) => {
      this.props.callbackToaster('network unavailable')
   });
}

Answer 1

您不应该永远使用DURATION。这可能会引起一些问题。 “ Toast”的建议仅显示几秒钟的简短通知。而且close（）只是自然的回调，而不是多函数功能。对不起，我的英语。

反应原生烤面包机（react-native-easy-toast）只显示一次

1 个答案: