实现效果 <1>输入框左边有图标<2>去掉下划线<3>有一个白色带边框的背景
render() {
return (
<View style={styles.container}>
<Text style = {styles.topCompentStyle}>
鲜桥销售管理系统
</Text>
<View style={{flexDirection:'column',top:200}}>
<Image source={require('./img/icon.png')} style={{alignSelf:'center',width:130,height:130}} />
<Text style={styles.nextIconTextStyle}>让买卖更容易</Text>
</View>
<Image source={require('./img/search.png')} style={styles.bgIconStyle}>
<Image source={require('./img/login_username.png')} style={styles.InputIconStyle} />
<TextInput style={styles.input}
underlineColorAndroid='transparent'
placeholder ={'请输账号'}
/>
</Image>
<Image source={require('./img/search.png')} style={styles.bgIconStyle}>
<Image source={require('./img/login_pwd.png')} style={styles.InputIconStyle} />
<TextInput style={styles.input}
underlineColorAndroid='transparent'
placeholder ={'请输密码'}
/>
</Image>
<TouchableHighlight style={styles.btn} underlayColor={'gray'} onPress={this._onPress.bind(this)}>
<Text style={styles.btnTextPrompt}> 登录</Text>
</TouchableHighlight>
<Text style={styles.bottomTextPrompt}>
客服电话:400-285-927
</Text>
</View>
);
}
所用到的样式
input:{
height:45,
borderWidth:1,
marginLeft: 2,
paddingLeft:20,
width:ComponentWidth-30,
borderColor: '#ccc',
fontSize: 20,
borderRadius: 4,
backgroundColor: '#fff',
},
InputIconStyle:{
top:10,
width: 26,
height: 26
},
bgIconStyle:{
top:300,
flexDirection:'row',
height:45,
justifyContent: 'flex-end',
left:leftStartPoint,
width:ComponentWidth
},