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; 可以 ...
随机推荐
- js 异步请求
<p id="check"> <label>验证码:</label> <input class="vid" id=&q ...
- webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...
- Math.ceil()、Math.floor()和Math.round()
下面来介绍将小数值舍入为整数的几个方法:Math.ceil().Math.floor()和Math.round(). 这三个方法分别遵循下列舍入规则: Math.ceil()执行向上舍入,即它总是将数 ...
- 解决在html中引入font-awesome的css文件后, 图标显示不出来
今天小颖在做项目时,需要在html文件中引入font-awesome.min.css,但是引入后: 以前小颖在用font-awesome库里的图标时,都是直接从node中下包,然后在main.js中引 ...
- 启动weblogic报错:string value '2.4' is not a valid enumeration value for web-app-versionType in namespace http://java.sun.com/xml/ns/javaee
启动报错: 原因:有人改动了web.xml的头 解决方法: 在web.xml中修改抬头为: <?xml version="1.0" encoding="UTF-8& ...
- PAT甲级1060 Are They Equal【模拟】
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805413520719872 题意: 给定两个数,表示成0.xxxx ...
- atoi函数的用法
库函数原型: #inclue <stdlib.h> int atoi(const char *nptr); 用法:将字符串里的数字字符转化为整形数.返回整形值. 注意:转化时跳过前面的空格 ...
- { MySQL基础数据类型}一 介绍 二 数值类型 三 日期类型 四 字符串类型 五 枚举类型与集合类型
MySQL基础数据类型 阅读目录 一 介绍 二 数值类型 三 日期类型 四 字符串类型 五 枚举类型与集合类型 一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己 ...
- 恢复制作了系统盘的U盘
制作了系统盘的U盘通常容量会变得很小(比如用win32制作的系统盘) 此时在系统安装完成之后就要把U盘恢复,否则就无法正常使用了 步骤: 1.win+r打开程序搜索框,输入cmd打开dos窗口 2.在 ...
- hive拉链表
前言 本文将会谈一谈在数据仓库中拉链表相关的内容,包括它的原理.设计.以及在我们大数据场景下的实现方式. 全文由下面几个部分组成:先分享一下拉链表的用途.什么是拉链表.通过一些小的使用场景来对拉链表做 ...