Error: React.Children.only expected to receive a single React element child. This error is located at: in TouchableRipple

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

在 View

中包裹 ShareButton 和 BottomButtonSection

 <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>

Error: React.Children.only expected to receive a single React element child. This error is located at: in TouchableRipple

Error: React.Children.only expected to receive a single React element child. This error is located at: in TouchableRipple

react-native

styled-components

react-native-svg