反应本机 AwesomeAlert customView 抛出错误
react native AwesomeAlert customView throwing an error
我正在使用 react-native-awesome-alerts
插件在我的屏幕上显示警报。我为警报创建了一个自定义视图,但它抛出了这个错误
Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'RCTRawText [text: }]' to a '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
函数中输入的任何错误代码。所以我无法追查错误的原因。有没有人遇到过同样的问题?
我无法在您的 post 中发表评论,因为声誉不佳,所以我将其作为答案。
根据我对本机反应的了解并根据您的代码,您在 renderCustomAlertView 中缺少 return。
所以你的代码必须类似于
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>
)
}
您的 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>
)
我正在使用 react-native-awesome-alerts
插件在我的屏幕上显示警报。我为警报创建了一个自定义视图,但它抛出了这个错误
Cannot add a child that doesn't have a YogaNode to a parent without a measure function! (Trying to add a 'RCTRawText [text: }]' to a '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
函数中输入的任何错误代码。所以我无法追查错误的原因。有没有人遇到过同样的问题?
我无法在您的 post 中发表评论,因为声誉不佳,所以我将其作为答案。 根据我对本机反应的了解并根据您的代码,您在 renderCustomAlertView 中缺少 return。
所以你的代码必须类似于
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>
)
}
您的 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>
)