不變違規：不變違規：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

關於TouchableWithoutFeedback的文檔說：

TouchableWithoutFeedback僅支持一個孩子。 如果希望有幾個子組件，請將它們包裝在View中。

實際上， TouchableOpacity確實支持多個子級（因此，為什么使用該組件時代碼可以工作），TouchableWithoutFeedback不支持。 但是，您給TouchableWithoutFeedback多個子組件（ Text和Icon ），這是無效的。 解決方案應該是簡單地將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 2

如果您不想在單擊/觸摸時顯示模糊效果。 您只需在<TouchableOpacity> activeOpacity={1} <TouchableOpacity>標記中設置activeOpacity={1}

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

Answer 3

您不能在Touchables中使用兩個或多個元素。 要解決您的問題，您必須使用<View></View>或<React.Fragment></React.Fragment>包裝元素， <View></View>所示：

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