如何解决此错误 "RawText must be wrapped in explicit text component" 对于反应原生组件

Question

当我为按钮添加单击事件时，它在ios模拟器中显示此错误

renderLastSlide(index) {
if (index === this.props.data.length - 1) {
return (
<Container>
<Content>
<Button rounded light>
<Text>Light</Text>
onPress={this.props.onComplete}
</Button>
</Content>
</Container>
);
}
}

导致此错误的此代码有什么问题？

Answer 1

我们需要在任何元素上指定事件。

在按钮上指定onPress：

<Button rounded light onPress={this.props.onComplete}>
<Text>Light</Text>    
</Button>

Answer 2

按钮中没有 onPress 参数，所以把它放在里面。

renderLastSlide(index) {
if (index === this.props.data.length - 1) {
return (
<Container>
<Content>
<Button rounded light onPress={this.props.onComplete}>
<Text>Light</Text>
</Button>
</Content>
</Container>
);
}

Answer 3

Hai 你需要穿上按钮内部的按钮。

renderLastSlide(index) {
if (index === this.props.data.length - 1) {
return (
<Container>
<Content>
<Button 
title= 'hai' 
onPress={this.props.onComplete} // Add here
rounded
light
/>
</Content>
</Container>
);
}

如果你想使用文本组件，我认为更喜欢使用可触摸不透明度而不是按钮。因此，我们可以在标题上添加样式。