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

Question

我知道默认情况下 TouchableOpacity 始终将宽度作为 wrap-content。但是我将它放在一个具有 flex 的视图中： 1. TouchableOpacity 的宽度变为 match-parent/take 屏幕的整个宽度。

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

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

谢谢

Answer 1

你可以像这样设置 TouchableOpacity 的样式，这样 TouchableOpacity 就会有自己的样式

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

Answer 2

您将不得不为 TouchableOpacity 使用 position: "absolute" 样式

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

您还可以使用 alignSelf:'flex-start' 也可以使用 center 或 flex-end。

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

How to make TouchableOpacity wrap its content when nested inside parent that has flex = 1

react-native

touchableopacity