javascript - 在FormInput组件下方 react native 元素行

我正在使用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='[email protected]'
                            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的bo​​rderWidth属性添加到FormInput上，但这似乎不起作用。

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

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

有没有解决方法？

最佳答案

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

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