css - 如何摆脱 React Native 中的 textInput 缩进(填充)？

Question

我在我的 React Native 应用程序中使用 TextInput，并且占位符文本与它下面的边框不对齐。占位符文本从左侧缩进大约 10 个像素。我们的 UX 不喜欢这样，并希望它与下面的边框完全对齐。基本上，从左边开始，没有任何缩进。我对此进行了研究，但无法找到任何结果。有谁知道如何解决这一问题？？

<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: {

[...]

}