错误:React. children .only expected to receive一个React元素子元素.此错误

Question

我试图在react-native中的TouchableRipple中调用svg图像图标和文本

这是我的代码:

import ShareButton from "./assets/button.svg";
<View>
......
......
<BottomSection
borderless
style={{
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
}}
as={TouchableRipple}
onPress={() => console.log("HenloY")}
>
<ShareButton
onPress={() => console.log("Pressed share button")}
height={hp("3.0%")}
width={hp("3.0%")}
/>
<BottomButtonText>Share Product</BottomButtonText>
</BottomSection>
</View>

对于这个，我使用样式组件:

const BottomSection = styled.TouchableOpacity`
flex: 3;
height: 100%;
justify-content: center;
align-items: center;
background-color: #fff;
border-top-color: #ddddec;
border-top-width: 1px;
`;
const BottomButtonText = styled.Text`
color: red;
font-size: 14px;
`;

当我运行这个时，我得到了以下错误:

误差:

Error: React.Children.only expected to receive a single React element child.
This error is located at:
in TouchableRipple (created by Context.Consumer)
in ThemedComponent (created by withTheme(TouchableRipple))
in withTheme(TouchableRipple) (created by Context.Consumer)
in StyledNativeComponent (created by Styled(Component))
in Styled(Component) (at CategoriesCard.tsx:27)
....................................................
....................................................

我做错了什么…?任何建议都会有帮助的!

Answer 1

需要更新BottomSection。请查看下面的代码，可能会有所帮助:

<BottomSection
borderless
style={{
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
}}
as={TouchableRipple}
onPress={() => console.log('HenloY')}>
<>
<ShareButton
onPress={() => console.log('Pressed share button')}
height={hp('3.0%')}
width={hp('3.0%')}
/>
<BottomButtonText>Share Product</BottomButtonText>
</>
</BottomSection>

Answer 2

将ShareButton和BottomButtonSection包裹在View中

<BottomSection
borderless
style={{
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
}}
as={TouchableRipple}
onPress={() => console.log('HenloY')}>
<View>
<ShareButton
onPress={() => console.log('Pressed share button')}
height={hp('3.0%')}
width={hp('3.0%')}
/>
<BottomButtonText>Share Product</BottomButtonText>
</View>
</BottomSection>