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

您可以通過將“透明”傳遞給 borderColor來更改邊框的顏色，如下所示。

 <Input inputContainerStyle={{ borderWidth: 0, borderColor: "transparent" }}
    placeholder="Test placeholder...."/>

Answer 4

嘗試將每個<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>

Answer 5

我為一個 Input 元素做了這個。 對於 FormInput，您可能會獲得相同的效果。 無論如何，它擺脫了底部邊框。 您使用 inputContainerStyle。

            <Input
                placeholder="Username"
                leftIcon={<FontAwesome name="user-o" size={24} />}
                onChangeText={(username) => this.setState({username})}
                value={this.state.username}
                containerStyle={styles.formInput}
                inputContainerStyle={{borderRadius:10,backgroundColor:'white',borderBottomColor:'white'}}
                />