我正在使用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的borderWidth属性添加到FormInput上,但这似乎不起作用。
我也尝试将borderColor设置为transparent,这也不起作用。
我还注意到,如果我删除FormValidationMessage组件,则这两行变得更加明显。
有没有解决方法?
最佳答案
我遇到了同样的问题,并通过如下添加borderBottomWidth:0 来修复了:<Input inputContainerStyle={{borderBottomWidth:0}} />