反应原生AwesomeAlert customView引发错误

时间:2019-02-02 03:59:50

标签: react-native plugins alert custom-view

我正在使用react-native-awesome-alerts插件在屏幕上显示警报。我为警报创建了一个自定义视图,但它引发了这个错误

  

如果没有测量功能,则无法将没有YogaNode的孩子添加到父母中! (尝试将“ RCTRawText [text:}]”添加到“ RCTView”)

我的代码是这样的:

_displayNotifyAlert(){
  if(this.state.notifyAlert == true){
    return (
      <AwesomeAlert
        show={true}
        title="Service Cancellation"
        message="Tell the shop why are you cancelling their services."
        messageStyle={{ textAlign: 'center' }}
        customView={this.renderCustomAlertView()}
        showCancelButton={true}
        showConfirmButton={true}
        cancelText="Cancel"
        confirmText="Cancel Service"
        confirmButtonColor={Colors.default}
        onCancelPressed={() => this._closeNotifyAlert()}
        onConfirmPressed={() => this._cancelServices()}
      />
    )
  }
}

renderCustomAlertView = () => (
  <View style={[ AppStyles.input ]}>
    <TextInput
      placeholder="Write your reason briefly."
      underlineColorAndroid="transparent"
      style={{ textAlignVertical: 'top', height: 100 }}
      numberOfLines={5}
      multiline={true}
      maxLength={200}
      onChangeText={(cancel_reason) => this.setState({cancel_reason})} />
    }
  </View>
)

如果我删除此行customView={this.renderCustomAlertView()},该错误将消失。我没有看到放在renderCustomAlertView函数中的任何错误代码。因此,我无法找到错误的原因。以前有人遇到过同样的问题吗?

2 个答案:

答案 0 :(得分:0)

由于声誉低下,我无法在您的帖子中发表评论,因此我将其作为答复。 根据我对本机响应以及基于您的代码的了解,您在renderCustomAlertView中缺少返回。

因此您的代码必须类似于

   renderCustomAlertView = () => {
             return(
              <View style={[ AppStyles.input ]}>
                  <TextInput
                     placeholder="Write your reason briefly."
                     underlineColorAndroid="transparent"
                     style={{ textAlignVertical: 'top', height: 100 }}
                     numberOfLines={5}
                     multiline={true}
                     maxLength={200}
                     onChangeText={(cancel_reason) => this.setState({cancel_reason})} />
           </View>
     )
   }

答案 1 :(得分:0)

renderCustomAlertView函数末尾还有一个额外的“}”。将此函数更改为以下内容,它将起作用:

renderCustomAlertView = () => (
  <View style={[ AppStyles.input ]}>
    <TextInput
      placeholder="Write your reason briefly."
      underlineColorAndroid="transparent"
      style={{ textAlignVertical: 'top', height: 100 }}
      numberOfLines={5}
      multiline={true}
      maxLength={200}
      onChangeText={(cancel_reason) => this.setState({cancel_reason})} />
  </View>
)