错误：React.Children.only 期望接收单个 React 元素子项。此错误位于：在 TouchableRipple答案

【问题标题】：Error: React.Children.only expected to receive a single React element child. This error is located at: in TouchableRipple错误：React.Children.only 期望接收单个 React 元素子项。此错误位于：在 TouchableRipple
【发布时间】：2021-06-05 03:48:13
【问题描述】：

我正在尝试在 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)
   ....................................................
   ....................................................

我在这里做错了什么......！？

任何建议都会有所帮助！

【问题讨论】：

标签： react-native styled-components react-native-svg

【解决方案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>

【讨论】：

我不确定 TouchableOpacity 的 as={TouchableRipple} 属性。如果可能，您可以尝试删除它。

【解决方案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>

【讨论】：