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

【问题标题】：How to get rid of textInput indentation (padding) in React Native?如何摆脱 React Native 中的 textInput 缩进（填充）？
【发布时间】：2018-11-17 10:47:58
【问题描述】：

我在我的 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
}

【问题讨论】：

标签： css reactjs react-native

【解决方案1】：

删除

paddingHorizontal: 10,

来自

textInput: {

[...]

}

【讨论】：

【解决方案2】：

试试这个兄弟..

paddingVertical: 0

【讨论】：

【解决方案3】：

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

paddingHorizontal: 0

【讨论】：