当嵌套在具有flex = 1的父级中时，如何使TouchableOpacity包裹其内容

问题描述

我知道，默认情况下，TouchableOpacity始终将宽度作为包装内容。但是，我将其放置在具有flex功能的View内：1. TouchableOpacity的宽度变为parent-parent /占据屏幕的整个宽度。

<View style={ {flex:1} }>
   <TouchableOpacity>
      <Text>I'm button</Text>
   </TouchableOpacity>
</View>

问题是当嵌套在这样的视图中时，如何使TouchableOpacity包装内容。

谢谢

解决方法

您必须为TouchableOpacity使用位置：“绝对”样式

<View style={{flex:1}}>
   <TouchableOpacity style={{position: "absolute" }}>
      <Text>I'm button</Text>
   </TouchableOpacity>
</View>

您也可以使用 alignSelf：“ flex-start”也可以使用居中或flex-end。

您可以像这样设置TouchableOpacity的样式，以便TouchableOpacity拥有自己的样式

               <View style={ {flex:1} }>
                  <TouchableOpacity style={{width:'80%',height:'20%'}}>
                      <Text>I'm button</Text>
                  </TouchableOpacity>
                </View>

react-native touchableopacity