关于解决textInput的左图像问题 react native

时间:2020-05-30
本文章向大家介绍关于解决textInput的左图像问题 react native,主要包括关于解决textInput的左图像问题 react native使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

需要完成的登录界面输入框是这样的

当时觉得应该是直接用textInput来写,查看官方文档,也有一个名为inlineImageLeft属性,但是必须要把图片放在指定文件下,(我没有那个文件,手动添加,报错。尴尬,哈哈哈)
,而且也看到只支持安卓。

最后解决方法是用一个wrap包裹着左图像和一个输入框,把输入框的border设置为透明色,然后效果图的下划线应该是有wrap来绘制。

下面贴一下源码:

//视图代码
<View style={styles.inputWrap}>
    <Image style={styles.icon} source={require('../assets/ic-user-copy-2.png')}/>
    <TextInput style={styles.textInput} placeholder="用户名" placeholderTextColor='#abbed7'
               onChangeText={(userName)=>{dispatch({type: 'LOGINUSER', userName:userName})}}
    />
</View>
<View style={styles.inputWrap}>
    <Image style={styles.icon} source={require('../assets/ic-lock-copy.png')}/>
    <TextInput style={styles.textInput} placeholder="密码" placeholderTextColor='#abbed7' secureTextEntry={true}
               onChangeText={(password)=>{dispatch({type: 'LOGINPASS', password:password})}}/>
</View>

//样式代码
inputWrap:{
        flex:1,
        flexDirection:'row',
        alignItems:'center',
        width:245,
        height:50,
        backgroundColor:'transparent',
        borderColor:'rgba(171, 190, 215, 0.56)',
        borderBottomWidth: 1,
        marginBottom:25,
    },
    icon: {
        width: 16,
        height: 16,
        marginRight:10
    },
    textInput:{
        backgroundColor:'transparent',
        borderColor:'transparent',
        borderWidth: 1,
        width:200,
        height:50,
        fontSize:14,
        color:'#fff',
    },

$flag 上一页 下一页