React-Native 自定义TextInput 登录页面

来源：互联网发布：决策树源码编辑：程序博客网时间：2024/05/17 18:26

实现效果 <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
},

0 0