React Native Android端TextInput占位符初始位置异常求助

问题现象 #

TextInput已配置padding:10，但Android端初始状态下占位符紧贴左边界；输入内容后清空，文本和占位符才会回到正确的内边距位置。布局上TextInput与按钮分别处于flex占比85和15的View中，iOS端无此问题。

原代码 #

// 样式
textInput: {
  width: '100%',
  marginHorizontal: 0,
  height: 41,
  color: 'black',
  padding: 10,
  borderWidth: 1,
  borderColor: 'grey',
  borderRadius: 5,
  fontSize: 16,
}
addEmailRow: {
  flexDirection: 'row',
  width: '100%',
  alignSelf: 'stretch',
  height: 60,
  textAlign: 'center',
  paddingTop: 10,
  paddingHorizontal: 20,
  backgroundColor: 'grey',
},
addEmailInput: {
  flex: 85,
  height: '100%',
},
addEmailButton: {
  flex: 15,
  height: '100%',
  alignContent: 'center',
  alignItems: 'center',
  alignSelf: 'center',
}

// 布局
<View style={styles.addEmailRow}>
  <View style={styles.addEmailInput}>
    <TextInput
      style={styles.textInput}
      placeholder={'Email'}
      keyboardType={'email-address'}
      autoCapitalize={'none'}
      value={emailAddress}
    />
  </View>
  <View style={styles.addEmailButton}>
    <TouchableOpacity
      style={styles.addButton}
      activeOpacity={0.5}
      onPress={addEmailButtonTapped}>
      <Image
        source={require('../../Assets/add-circle-icn.png')}
      />
    </TouchableOpacity>
  </View>
</View>

解决方法 #

1. 确保value初始值为空字符串

如果emailAddress初始值是undefined或null，Android端TextInput会出现渲染异常。将初始值设为空字符串：

const [emailAddress, setEmailAddress] = useState('');

2. 明确设置左右内边距与垂直对齐

修改textInput样式，补充明确的左右内边距和垂直对齐属性，强制Android端应用样式：

textInput: {
  width: '100%',
  marginHorizontal: 0,
  height: 41,
  color: 'black',
  padding: 10,
  paddingLeft: 10, // 显式指定左内边距
  paddingRight: 10, // 显式指定右内边距
  borderWidth: 1,
  borderColor: 'grey',
  borderRadius: 5,
  fontSize: 16,
  textAlignVertical: 'center', // 修复Android垂直对齐导致的布局偏移
}

3. 显式设置占位符颜色

即使使用默认颜色，显式设置placeholderTextColor也能触发Android端的正确渲染：

<TextInput
  style={styles.textInput}
  placeholder={'Email'}
  placeholderTextColor={'#999'} // 自定义占位符颜色，与默认一致也可
  keyboardType={'email-address'}
  autoCapitalize={'none'}
  value={emailAddress}
/>

原理说明 #

Android端TextInput在初始值为空（尤其是undefined）时，存在渲染优先级问题，导致padding样式未被正确应用。输入内容后组件重新渲染，样式才会正常生效。以上方法通过明确样式属性、修正初始值，强制Android端正确解析布局规则。

内容的提问来源于stack exchange，提问作者mohammedmt.zco