码迷,mamicode.com
首页 > 其他好文 > 详细

React Native随笔——组件TextInput

时间:2017-10-12 19:12:10      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:state   img   nec   put   ext   arc   自动   idt   err   

一、实例

  先看一下我要做的搜索框的样子

技术分享

  • 需要一个Image,和一个TextInput
  • 去掉默认下划线 underlineColorAndroid=‘transparent‘
  • 设置光标颜色 selectionColor=‘#ff4f39‘
  • 自动获取焦点 autoFocus={true}
      <View style={styles.searchBox}> 
                <Image source={require(../../img/search.png)} style={styles.searchImg}/>
                <TextInput 
                    underlineColorAndroid=transparent 
                    autoFocus={true}
                    placeholder=欢聚有味
                    placeholderTextColor=#999
                    selectionColor=#ff4f39
                    style={styles.inputText}
                    onChangeText={(text) => this.setState({text})}
                />
            </View>

样式

  • 在他们的父容器设置 flexDirection: ‘row‘,让它们横着排
  • 搜索框本身带有padding,所以设置padding为0,否则height为30放不下
  searchBox:{
        flexDirection: row,
        alignItems:center,
        backgroundColor:#fff,
        width:width*0.9,
        borderRadius:5,
        height:30,
    },
    searchImg:{
        marginLeft:15,
        marginRight:10,
    },
    inputText:{
        width:width*0.8-50,
        padding:0,
    },

 

未完待续。。。

React Native随笔——组件TextInput

标签:state   img   nec   put   ext   arc   自动   idt   err   

原文地址:http://www.cnblogs.com/MaiJiangDou/p/7657402.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!