0

当我使用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>
)
4

3 回答 3

2

上的文档TouchableWithoutFeedback说:

TouchableWithoutFeedback 只支持一个孩子。如果您希望拥有多个子组件,请将它们包装在一个视图中。

事实上,TouchableOpacity确实支持多个孩子(因此为什么您的代码在使用该组件时可以工作),TouchableWithoutFeedback 不支持。但是,您给 TouchableWithoutFeedback 多个子组件(TextIcon),这是无效的。解决方案应该是简单地将 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>
于 2019-09-07T21:35:58.317 回答
1

如果您不想在点击/触摸时显示模糊效果。你可以简单地设置activeOpacity={1}<TouchableOpacity>标签

<TouchableOpacity activeOpacity={1}>
<Text>Hello</Text>
</TouchableOpacity>
于 2019-09-08T10:09:11.187 回答
0

您不能在 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>


于 2019-09-08T10:41:27.020 回答