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

Pink 发布于2019-08-29 17:21 / 2377人阅读

摘要：尴尬，哈哈哈，而且也看到只支持安卓。最后解决方法是用一个包裹着左图像和一个输入框，把输入框的设置为透明色，然后效果图的下划线应该是有来绘制。下面贴一下源码视图代码用户名密码样式代码

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

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

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

下面贴一下源码：

//视图代码

    
    {dispatch({type: "LOGINUSER", userName:userName})}}
    />


    
    {dispatch({type: "LOGINPASS", password:password})}}/>


//样式代码
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",
    },

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114274.html

React Native 中切换TextInput保持键盘展开

摘要：传给回调函数的里，包含一个触摸事件参数。官网的版文档中，和组件中都有属性，这个属性接收一个回调函数，函数原型是，在组件和的组件的时候触发该事件，传给回调函数的里，参数，其中的属性为该组件的。 1、问题问题场景：由于手机屏幕高度不定，做表单页面时，外层通常加上ScrollView组件，使其能够适应屏幕进行滚动。业务需要里面放置多个TextInput组件。问题描述：出现的问题是，首...

xiangzhihong 2019-08-22 10:43 评论0 收藏0
ReactNative开发笔记（持续更新...）

摘要：，已过期，请使用代替。解决方案安卓增加属性并设置为官方解释当图片实际尺寸和容器样式尺寸不一致时，决定以怎样的策略来调整图片的尺寸。本文均为RN开发过程中遇到的问题、坑点的分析及解决方案，各问题点之间无关联，希望能帮助读者少走弯路，持续更新中... （2019年3月29日更新）原文链接：http://www.kovli.com/2018/06/... 作者:Kovli - 如何在原生...

浠ラ箍 2019-08-23 14:33 评论0 收藏0
React系列 --- Jsx, 合成事件与Refs(二)

摘要：系列系列简单模拟语法一系列合成事件与二系列算法实现分析三系列从到再到四系列与部分源码解析五系列从使用了解的各种使用方案六的诞生他是的一种扩展语法。这个函数接受组件的实例或元素作为参数，以存储它们并使它们能被其他地方访问。 React系列 React系列 --- 简单模拟语法(一)React系列 --- Jsx, 合成事件与Refs(二)React系列 --- virtualdom di...

LiuZh 2019-08-26 10:37 评论0 收藏0