React Native布局需求：文本垂直居中，按钮居右下（避绝对定位）

嘿，我来帮你搞定这个布局问题！你想要文本在容器里垂直居中，按钮放在右下角，还不想用绝对定位对吧？之前的尝试差一点，咱们调整下flex布局的写法就能完美实现～

最优解决方案（简洁版） #

直接利用flex布局的margin: auto特性，一行代码搞定文本居中，再配合alignSelf让按钮靠右：

<View style={styles.container}>
  <Text style={styles.text}> 
    Change code in the editor and watch it change on your phone! Save to get a shareable url. 
  </Text>
  <View style={styles.buttonContainer}>
    <View style={styles.button} />
  </View>
</View>

对应的样式代码：

container: {
  marginTop: 80,
  height: 250,
  borderColor: 'red',
  borderWidth: 1,
  flexDirection: 'column', // 垂直排列元素
  padding: 10, // 可选，避免内容贴容器边缘
},
text: {
  fontSize: 18,
  borderWidth: 1,
  borderColor: 'green',
  margin: 'auto', // 核心！让文本自动填充上下左右空间，实现垂直+水平居中
  textAlign: 'center', // 可选，文本换行后也保持居中
},
buttonContainer: {
  borderWidth: 1,
  borderColor: 'purple',
  alignSelf: 'flex-end', // 让按钮容器靠右对齐
  marginBottom: 10, // 可选，和容器底部保持间距
},
button: {
  borderRadius: 10,
  width: 50,
  height: 25,
  backgroundColor: 'pink',
}

另一种思路（用占位视图挤位置） #

如果不太习惯margin: auto，也可以用flex占位的方式：给文本上方加一个占满剩余空间的空视图，把文本挤到垂直中心，按钮自然留在底部靠右：

<View style={styles.container}>
  <View style={styles.spacer} />
  <Text style={styles.text}> 
    Change code in the editor and watch it change on your phone! Save to get a shareable url. 
  </Text>
  <View style={styles.buttonContainer}>
    <View style={styles.button} />
  </View>
</View>

样式调整：

container: {
  marginTop: 80,
  height: 250,
  borderColor: 'red',
  borderWidth: 1,
  flexDirection: 'column',
},
spacer: {
  flex: 1, // 占满上方剩余空间，把文本推到垂直中心
},
text: {
  fontSize: 18,
  borderWidth: 1,
  borderColor: 'green',
  alignSelf: 'center', // 水平居中文本
},
buttonContainer: {
  borderWidth: 1,
  borderColor: 'purple',
  alignSelf: 'flex-end',
  marginBottom: 10,
},
button: {
  borderRadius: 10,
  width: 50,
  height: 25,
  backgroundColor: 'pink',
}

这两种方法都完全不需要用绝对定位，完美契合你的需求～

内容的提问来源于stack exchange，提问作者pollx