如何摆脱React Native中的textInput缩进（填充）？

Question

我在React Native应用程序中使用TextInput，占位符文本与其下方的边框不对齐。占位符文本显示大约10个像素，从左侧缩进。我们的用户体验不喜欢这个，并希望它与它下面的边框完全对齐。基本上，从左边开始没有任何缩进。我研究了这个但是却找不到任何东西。有谁知道如何解决这个问题？

<View style={styles.emailInputBar}>
    {this.state.showUsernameLabel &&
        <Text style={styles.formLabel}>username</Text>
    }
    <TextInput
        underlineColorAndroid="transparent"
        style={styles.textInput}
        placeholder="username"
        placeholderTextColor="rgba(255,255,255,0.7)"
        autoCorrect={false}
        autoFocus={autoFocus}
        returnKeyType={'next'}
        autoCaptialize={'none'}
        keyboardType={'email-address'}
        enablesReturnKeyAutomatically={true}
        onFocus={() => this.onFocus()}
        onBlur={() => this.onBlur()}
        onSubmitEditing={() => this.passwordInput.focus()}
        onChangeText={(text) => this.handleUsernameChange(text)}
        value={email}
    />
</View>

这是css：

passInputBar: {
    display: 'flex',
    flex: 1,
    backgroundColor: 'transparent'
},
textInput: {
    fontSize: 16,
    color: 'white',
    textAlign: 'left',
    width: '100%',
    flexDirection: 'row',
    paddingHorizontal: 10,
    borderBottomWidth: 2,
    borderBottomColor: '#FCE443',
    flex: 1,
    paddingTop:Platform.OS === 'ios' ? 7 : 0,
    paddingBottom:Platform.OS === 'ios' ? 7 : 0,
    marginTop:Platform.OS === 'ios' ? 6 : 0,
    marginBottom:Platform.OS === 'ios' ? 6 : 0
}

Answer 1

删除

paddingHorizontal: 10,

来自

textInput: {

[...]

}

Answer 2

试试这个兄弟。

paddingVertical：0

Answer 3

有时有默认参数，仅删除“ paddingHorizo​​ntal”是不够的。您应该将其设置为0。

paddingHorizontal: 0