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
    }
})

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

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

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

有解决方法吗？

Answer 1

解决方案是添加input的属性，

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

Answer 2

尝试将每个<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 3

我对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'}}
                />

Answer 4

我也遇到了同样的问题，并通过添加borderBottomWidth：0 如下解决了该问题：

static const
BYTE Salt [] =
{
    0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 
    0x08, 0x09, 0x0A, 0x0B, 0x0C, 0x0D, 0x0E, 0x0F
};

Answer 5

，您可以通过如下方式更改边框的颜色来实现此目的：“透明” 到borderColor。

ELASTICSEARCH_DSL = {
    'default': {
        'hosts': 'localhost:9200'
    },
}

在FormInput组件下面反映Native Elements Line

5 个答案: