反应原生占位符仅在 Android 上部分可见

Question

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

在IOS上它可以工作，但在Android上它只是部分可见的。

IOS上的结果： 苹果占位符

安卓上的结果： 安卓占位符

这是我的代码：

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"
}
};

Answer 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>