TextInput placeHolder对齐

Question

为TextInput组件对齐占位符文本的最佳方法是什么？我已经尝试使用样式组件，如下所述。似乎没有这样的属性。

render() {
    return (
        <View style={styles.container}>
             <TextInput
                style={styles.textInput}
                onChangeText={(text) => this.setState({
                    username: text
                })}
                placeholder='Add Username'
             />
      </View>
    );
}

}

const styles = StyleSheet.create({
 container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
 },
 textInput: {
    height: 40,
    width: 200,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    borderColor: 'gray',
    borderWidth: 1,
 }

});

Answer 1

在您的textInput样式中添加textAlign: 'center'。

Answer 2

将textAlign={'center'}作为属性添加到TextInput组件

Answer 3

如果你没有给出textinput的多行属性'true‘

占位符始终是文本输入的中心

您可以给出填充，例如paddingTop

到textInput的样式

在占位符和文本输入之间设置距离