React-native 占位符仅在 Android 上部分可见

Posted 2023-04-18

【中文标题】React-native 占位符仅在 Android 上部分可见

【英文标题】：React-native placeholder only partially visible on Android

【发布时间】：2018-10-28 06:44:19

【问题描述】：

我在将 TextInput 居中时遇到问题，同时保持占位符可见。我希望文本从占位符开始的地方开始（居中）。

在 ios 上它可以工作，但在 android 上它只是部分可见。

IOS 上的结果： IOS placeholder

在安卓上的结果： Android placeholder

这是我的代码：

render() 
return (
  <View style=styles.containerStyle>
    <TextInput
      underlineColorAndroid='transparent'

      placeholder="Placeholder    "
      placeholderTextColor="grey"
      maxLength=6
      style=  fontSize: 30, color: "black",
        justifyContent: "center",  
      onChangeText=this.props.onChangeText
      value=this.props.value.toUpperCase()
    />
  </View>
);
  


const styles = 
  containerStyle: 
    flexDirection: 'row',
    backgroundColor: "#fff",
    borderRadius: 5,
    borderWidth: 1,
    shadowColor: "#000",
    elevation: 2,
    marginLeft: 5,
    marginRight: 5,
    alignItems: 'center',
    justifyContent: "center"
  
;

【问题讨论】：

您是否尝试过为文本输入提供 0 的填充？并不是说它应该引起重大变化，而是android上的文本输入默认有一个填充，它在ios上没有

我尝试在 TextInput 样式下添加padding:0。它没有改变任何东西。

【参考方案1】：

在您的 TextInput 样式中使用 flex:1

<View style=styles.containerStyle>
    <TextInput
      underlineColorAndroid='transparent'

      placeholder="Placeholder    "
      placeholderTextColor="grey"
      maxLength=6
      style=  flex:1, fontSize: 30, color: "black",
        justifyContent: "center",  
      onChangeText=this.props.onChangeText
      value=this.props.value.toUpperCase()
    />
  </View>