React Native 实现TextInput右侧添加文本 布局错位问题求助

你使用alignSelf: flex-end不符合预期的核心原因是混淆了flex布局主轴和交叉轴的属性作用：当父容器设置flexDirection: 'row'时，水平方向为主轴，竖直方向为交叉轴，alignSelf控制的是子元素在交叉轴的对齐规则，设置flex-end只会让文本靠容器底部，无法实现水平靠右的效果。

方案1：输入框占满剩余空间，自动挤推文本到右侧 #

适合需要输入框占满除文本外所有水平空间的场景，修改后代码如下：

<View style={{
  flex:1,
  flexDirection:'row',
  paddingBottom:5,
  borderColor:'#ccc',
  borderBottomWidth:1,
  alignItems: 'center' // 统一控制子元素垂直居中，无需单独给子元素加alignSelf
}}>
  <TextInput
    placeholder = "Wallet"
    placeholderTextColor="#000"
    style={{flex: 1}} // 输入框占满剩余水平空间
  />
  <Text>
    {userData.wallet}
  </Text>
</View>

方案2：主轴两端对齐 #

适合不需要输入框占满宽度，两个元素分别靠左右两端的场景，修改后代码如下：

<View style={{
  flex:1,
  flexDirection:'row',
  paddingBottom:5,
  borderColor:'#ccc',
  borderBottomWidth:1,
  alignItems: 'center', // 统一控制子元素垂直居中
  justifyContent: 'space-between' // 主轴两端对齐
}}>
  <TextInput
    placeholder = "Wallet"
    placeholderTextColor="#000"
    // 可根据需要设置输入框固定宽度，不设置则自适应内容宽度
  />
  <Text>
    {userData.wallet}
  </Text>
</View>

两种方案都可以保证右侧文本和输入框垂直居中对齐，同时实现水平靠右的效果。

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