Invariant Violation：Invariant Violation：React.Children.only expected to receive a single React element child

Question

当我使用 TouchableOpacity 时，我的代码工作正常，但是当我使用 TouchableWithoutFeedback 时，我的代码会抛出错误。因为我不希望点击时出现模糊效果，所以我想改用 TouchableWithoutFeedback。

return (
    <View  style={{ ...props.style}}>
        <TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
             <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
             <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
         </TouchableWithoutFeedback>

         <View style={styles.parentHr}/>
         {
             toggle.expanded &&
             <View style={styles.child}>
                 {props.data}  
             </View>
         }
    </View>
)

Answer 1

TouchableWithoutFeedback 上的 documentation 说：

TouchableWithoutFeedback supports only one child. If you wish to have several child components, wrap them in a View.

的确，TouchableOpacity 确实支持多个子组件（因此您的代码在使用该组件时有效），TouchableWithoutFeedback 不支持。但是，您为 TouchableWithoutFeedback 提供了多个子组件（Text 和 Icon），这是无效的。解决方案应该是简单地将文本和图标包装在 View 组件中，或者，如果您不想使用视图，则使用 React.Fragment:

<TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
    <React.Fragment>
        <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
        <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
    </React.Fragment>
</TouchableWithoutFeedback>

Answer 2

如果您不想在 click/touch 上显示模糊效果。您可以简单地将 activeOpacity={1} 设置为 <TouchableOpacity> 标签

<TouchableOpacity activeOpacity={1}>
<Text>Hello</Text>
</TouchableOpacity>

Answer 3

您不能在 Touchables 中使用两个或更多元素。要解决您的问题，您必须用 <View></View> 或 <React.Fragment></React.Fragment> 包装您的元素像这样：

   <TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
        <View>
              <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
              <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
        </View>
   </TouchableWithoutFeedback>

或者


   <TouchableWithoutFeedback   style={{...styles.row  }} onPress={toggleExpand}>
        <React.Fragment>
              <Text style={{ fontFamily : 'wiproakkurat-bold' , fontSize : RFValue(14) , color : '#434343' , paddingLeft : RFValue(18), ...props.styleText ,}}>{props.title}</Text>
              <Icon style={{paddingRight : RFValue(18)}} name={toggle.expanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'} size={RFValue(30)} color={'pink'} />
        </React.Fragment>
   </TouchableWithoutFeedback>

Invariant Violation：Invariant Violation：React.Children.only expected to receive a single React element child

Invariant Violation: Invariant Violation: React.Children.only expected to receive a single React element child

react-native

touchablewithoutfeedback