关于解决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',
    },