RN TextInput用法
效果图:
代码:
import React, {Component} from 'react'
import {StyleSheet, View, Text, TouchableOpacity, TextInput} from 'react-native' class TextInputView extends Component { constructor(popps) {
super(popps);
this.state = {
text: ''
} } hide(val) {
this.setState({
show: false, value: val
})
} getValue(text) {
var value = text;
this.setState({
show: true, value: value
})
} render() { return (
<View style={styles.container} accessible={true}>
<TextInput style={styles.styleInput}
returnKeyLabel={"search"}
placeholder={"请输入搜索的关键字"}
onEndEditing={this.hide.bind(this, this.state.value)}
onChangeText={this.getValue.bind(this)}
/> <Text style={styles.styleText}>搜索结果</Text>
{this.state.show ?
<View style={[styles.styleResult]}>
<Text onPress={this.hide.bind(this, this.state.value + "街")} style={styles.item}
numberOfLines={1}>
{this.state.value}街
</Text>
<Text onPress={this.hide.bind(this,this.state.value+"车站")} style={styles.item}
numberOfLines={1}>
{this.state.value}车站
</Text>
</View> : null
} </View>
);
} } const styles = StyleSheet.create({
container: {
flex: 1,backgroundColor: '#ffffff',marginTop: 20
},
styleInput: {
height:40,borderWidth: 1,marginLeft: 10,marginRight: 10,paddingLeft: 5,borderColor:'#cccccc',borderRadius:4
},
styleResult:{
marginLeft:15,marginTop:10
},
styleText: {
fontSize: 16,marginTop: 10,marginLeft:15
},
styleItem: {
fontSize:18,padding: 5,paddingTop: 10,paddingBottom: 10,marginLeft: 15,borderColor: '#dddddd',borderTopWidth: 0
} });
RN TextInput用法的更多相关文章
- row_number() over(partition by a order by b desc) rn 用法
转载于:http://www.blogjava.net/kxbin/articles/360195.html 可以看看http://jingyan.baidu.com/article/9989c746 ...
- RN控件之TextInput
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...
- 【RN - 基础】之TextInput使用简介
TextInput组件允许用户在应用中通过键盘输入文本信息,其使用方法和Text.Image一样简单,实例代码如下: <TextInput placeholder={'请输入用户名'} styl ...
- [RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法
React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 解决办法: 打开android工程,在AndroidManifest.xml中配置如下: <ac ...
- RN import ** from ** 用法
1.import React, { Component } from 'react': 导入‘react’文件里export的一个默认的组件,将其命名为React以及Component这个非默认组件 ...
- React Native随笔——组件TextInput
一.实例 先看一下我要做的搜索框的样子 需要一个Image,和一个TextInput 去掉默认下划线 underlineColorAndroid='transparent' 设置光标颜色 select ...
- 【Win 10 应用开发】Sqlite 数据库的简单用法
如果老周没记错的话,园子里曾经有朋友写过如何在 UWP 项目中使用 Sqlite数据库的文章.目前我们都是使用第三方封装的库,将来,SDK会加入对 Sqlite 的支持. 尽管目前 UWP-RT 库中 ...
- React Native 之 TextInput使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- Oracle用法、函数备忘记录
Listagg select * from emp select LISTAGG(ename,'-') within group (order by deptno desc) from emp; 可以 ...
随机推荐
- linux memcached开机启动
方法一: 在/etc/rc.d/rc.local 加入以下代码 /usr/local/memcached/bin/memcached -u root -d -m -l -P /tmp/memcache ...
- akka pubsub example
测了一个小时的 Pubsub 模式,发现这个模式和自己预期的不太一样,具体表现在: 1. 当 subscriber 订阅了某个 topic 并附带 groupName 时,如果 publish 发布的 ...
- NUC972----最简单的驱动(转)
1.新建文本文档,重命名为 hello_dev.c (驱动的开发同应用的开发一样,也是在文本文档下开发的). 2.包含头文件 内核模块需要包含内核相关头文件,不同模块根据功能的差异,所需要的头文件也不 ...
- SyntheticEvent
在react 的事件中使用SyntheticEvent 就会出现下面的报错 <input onChange={async e => { await foo() ... }} /> 那 ...
- babel 7 简单升级指南
babel 7 babel 7 发布两天了,试着对当前项目更新了下,仅此记录分享 主要改动参考 官方博客 官方升级指南 主要升级内容 不再支持放弃维护的 node 版本 0.10.0.12.4.5 使 ...
- 【CF526F】Pudding Monsters cdq分治
[CF526F]Pudding Monsters 题意:给你一个排列$p_i$,问你有对少个区间的值域段是连续的. $n\le 3\times 10^5$ 题解:bzoj3745 Norma 的弱化版 ...
- 【Vue】---编写Vue插件流程---【巷子】
一.在Vue中编写插件流程 1.创建组件 components/message.vue <template> <div class="message" v-if= ...
- MySQL数据库一个字段对应多个值得模糊查询和多个字段对应一个模糊查询
当一个字段想模糊查询出多个字段的时候,正常情况下一般会这么作 1 select * from a where name like 'a%' or name like 'b%' ....or ...; ...
- Saltstack设置安装源为阿里源
Saltstack设置安装源为官方源有时候在国内网络不好安装较慢或者安装不上,可设置为阿里源 比如对于 Centos 7 系统,在 saltstack 的官网提供的配置初始化手册是: sudo yum ...
- Direct Visual-Inertial Odometry with Stereo Cameras
这对于直接方法是特别有益的:众所周知直接图像对准是非凸的,并且只有在足够准确的初始估计可用时才能预期收敛.虽然在实践中像粗到精跟踪这样的技术会增加收敛半径,但是紧密的惯性积分可以更有效地解决这个问题, ...