React-Native 自定义TextInput 登录页面

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!