如何摆脱 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

试试这个兄弟..

垂直填充：0

Answer 2

消除

paddingHorizontal: 10,

从

textInput: {

[...]

}

Answer 3

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

paddingHorizontal: 0