React Native按钮组件定位：将顶部按钮移至屏幕底部居中

要将按钮固定在屏幕底部并水平居中，可通过以下两种常见方案实现：

方案一：利用Flexbox布局（推荐） #

给按钮的外层容器添加flex: 1和justifyContent: 'flex-end'，让容器占满整个屏幕空间，并将内部按钮推至底部，原有的marginHorizontal可保证按钮水平居中，marginBottom控制按钮与屏幕底部的间距。

修改后的代码：

<View style={{ flex: 1, justifyContent: 'flex-end', marginHorizontal: 52, marginBottom: 23 }}>
  <TouchableOpacity style={{ backgroundColor: '#5669FF', height: 58, borderRadius: 15, justifyContent: 'center', alignItems: 'center', shadowColor: '#000000', elevation: 1, shadowOpacity: 1 }}>
    <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ color: '#fff', fontSize: 18, fontWeight: '400', letterSpacing: 1, textTransform: 'uppercase' }}>Explore Events</Text>
      <View style={{ height: 30, width: 30, backgroundColor: '#3D56F0', borderRadius: 15, justifyContent: 'center', alignItems: 'center', marginLeft: 22 }}>
        <Image
          style={{ height: 18, width: 18 }}
          source={require("../Assets/Icons/RightArrow.png")}
        />
      </View>
    </View>
  </TouchableOpacity>
</View>

方案二：绝对定位（适合固定悬浮按钮） #

如果需要按钮固定在屏幕底部不随页面滚动移动，可给外层容器设置绝对定位，通过bottom、left、right属性控制位置：

修改后的代码：

<View style={{ position: 'absolute', bottom: 23, left: 52, right: 52 }}>
  <TouchableOpacity style={{ backgroundColor: '#5669FF', height: 58, borderRadius: 15, justifyContent: 'center', alignItems: 'center', shadowColor: '#000000', elevation: 1, shadowOpacity: 1 }}>
    <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ color: '#fff', fontSize: 18, fontWeight: '400', letterSpacing: 1, textTransform: 'uppercase' }}>Explore Events</Text>
      <View style={{ height: 30, width: 30, backgroundColor: '#3D56F0', borderRadius: 15, justifyContent: 'center', alignItems: 'center', marginLeft: 22 }}>
        <Image
          style={{ height: 18, width: 18 }}
          source={require("../Assets/Icons/RightArrow.png")}
        />
      </View>
    </View>
  </TouchableOpacity>
</View>

内容的提问来源于stack exchange，提问作者MST intern 2