Инвариантное нарушение: инвариантное нарушение: ожидается, что React.Children. Получит только один дочерний элемент React

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

Если вы не хотите показывать эффект размытия при нажатии / касании. Вы можете просто установитьactiveOpacity={1} в <TouchableOpacity> тег

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

Answer 2

Документация наTouchableWithoutFeedback говорит:

TouchableWithoutFeedback поддерживает только одного дочернего элемента. Если вы хотите иметь несколько дочерних компонентов, оберните их в представление.

Действительно, TouchableOpacityподдерживает несколько дочерних элементов (поэтому ваш код работает при использовании этого компонента), а TouchableWithoutFeedback - нет. Однако вы передаете TouchableWithoutFeedback несколько дочерних компонентов (Text а также Icon), что неверно. Решение должно заключаться в том, чтобы просто обернуть текст и значок вView компонент, или, если вы не хотите использовать 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 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>