FormInput 组件下的 React Native Elements Line

Question

我正在使用 React Native Elements 中的 FormInput 元素，它似乎在每个 FormInput 组件下方生成一行。一个比另一个更微弱。

表格如下

<View style={styles.container}>
                <Image 
                    style={styles.image}
                    source={app.imageBackground}
                />
                <View style={{ alignItems: 'center' }}>
                    <Image 
                        style={styles.logo}
                        source={app.logo}
                    />
                </View>

                <View  style={styles.cardWrapper}>
                    <View style={styles.card}>
                        <FormInput 
                            inputStyle={styles.textInput}
                            placeholder='user@email.com'
                            autoCapitalize='none'
                            autoCorrect={false}
                            underlineColorAndroid='transparent'
                            placeholderTextColor='white'
                            onChangeText={this.onEmailChange.bind(this)} 
                        />
                        <FormInput 
                            secureTextEntry={true}
                            autoCapitalize='none'
                            placeholder='password'
                            autoCorrect={false}
                            inputStyle={styles.textInput}
                            underlineColorAndroid='transparent'
                            placeholderTextColor = 'white'
                            onChangeText={this.onPasswordChange.bind(this)} 
                        />
                        <FormValidationMessage>{this.renderError()}</FormValidationMessage>
                        {this.renderButton()}

                        <Text style={{color:'white', textAlign:'center'}}>New to Foodspecials?<Text style={{fontWeight:'900'}} onPress={() => this.props.navigation.navigate('SignUp')}> Sign up</Text></Text>
                    </View>
                </View>

            </View>

这是我的风格

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    cardWrapper: {
        padding: 20
    },
    card: {

    },
    logo: {
        justifyContent: 'center',
    },
    image: {
        backgroundColor: '#ccc',
        flex: 1,
        position: 'absolute',
        width: '100%',
        height: '100%',
        justifyContent: 'center',
    },
    textInput: {
        height: 50,
        fontSize: 20,
        borderRadius: 50,
        backgroundColor: 'rgba(255, 255, 255, 0.3)',
        color: 'white',
        width: '100%',
        paddingLeft: 20,
        marginTop: 10,
        marginBottom: 10
    },
    button: {
        borderWidth: 2,
        borderColor: 'white',
        marginTop: 10,
        marginBottom: 10
    }
})

我试图将 0 的 borderWidth 属性添加到 FormInput ，但这似乎不起作用。

我还尝试将 borderColor 设置为透明，这也不起作用。

我还注意到，如果我删除 FormValidationMessage 组件，这两行都会变得更加明显。

有解决方法吗？

Answer 1

我遇到了同样的问题，并通过添加 borderBottomWidth:0来修复它，如下所示：

<Input inputContainerStyle={{borderBottomWidth:0}} />

Answer 2

解决方案是添加一个 input 属性，

<Input 
   inputContainerStyle={{borderBottomWidth:0}}
     />

Answer 3

尝试将 Each<FormInput/>放入<View>. 然后相应地设置该视图的样式。这些行是组件的一部分<FormInput/>，因此使用 InputStyle 道具进行样式设置无法完成这项工作。

<View style={styles.input}>
    <Input placeholder="Username" returnKeyType="next" />
</View>
<View style={styles.input}>
    <Input placeholder="Password" returnKeyType="go" secureTextEntry />
</View>