React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性。

/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 2016-09-16
* TextInput 常用属性
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TextInput,
View
} from 'react-native'; class Project extends Component {
render() {
return (
<View style={styles.container}>
<TextInput style={styles.inputStyle}
//value={'我是默认的'} /*该文字无法删除*/
keyboardType = {'number-pad'} //弹出键盘类型
multiline = {true} //多行显示,默认false:单行显示
// password = {true} //密码 多行文本不显示密码
placeholder = {'我是占位文字'} //占位文字
placeholderTextColor = 'red' //占位文字颜色
autoCapitalize = {'characters'} //通知文本输入自动利用某些字符
clearButtonMode = {'always'} //右侧的清除模式
autoCorrect = {false} //禁用自动校正 默认值true开启自动校正
// editable = {false} // 是否可编辑 默认为true可编辑
// retrunKeyType = {'go'} //返回键类型
/>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
inputStyle:{
height:60,
marginTop:20,
borderWidth:1,
borderColor:'black'
}
}); AppRegistry.registerComponent('Project', () => Project);

  完整源码下载:https://github.com/pheromone/React-Native-1

React Native 组件之TextInput的更多相关文章

  1. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

  2. React Native组件(二)View组件解析

    相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...

  3. 从零学React Native之11 TextInput

    TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式. 与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本 ...

  4. React Native组件之Text

    React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...

  5. React Native组件之Switch和Picker和Slide

    React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

  6. react native组件的生命周期

    react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...

  7. react native组件的创建

    react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...

  8. React Native组件(三)Text组件解析

    相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...

  9. Android React Native组件的生命周期及回调函数

    熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...

随机推荐

  1. 补第二周四人小组WBS/NABCD

    四人小组项目<东北师范大学论坛> 要求: 1.给出需求概述.功能列表.痛点或亮点.NABCD及WBS模型在此项目中的应用. 2.不熟悉的名词,自行搜索资料并参考教材第393页开始的术语索引 ...

  2. hduoj------2594 Simpsons’ Hidden Talents

    Simpsons’ Hidden Talents Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...

  3. ASP.NET Web API中的依赖注入

    什么是依赖注入 依赖,就是一个对象需要的另一个对象,比如说,这是我们通常定义的一个用来处理数据访问的存储,让我们用一个例子来解释,首先,定义一个领域模型如下: namespace Pattern.DI ...

  4. JSP生成条形码

    下载barcode4j-2.0-bin.zip  目前最新版本是2.0, 解压barcode4j-2.0-bin.zip, 将其中的\lib\avalon-amework-4.2.0.jar和\bui ...

  5. BZOJ1520 [POI2006]Szk-Schools

    裸的费用流啊... 建图:对于一个点p拆成两个p1和p2,S向p1连边,流量为1,费用为0:p2向T连边流量为1,费用为0 然后i1向a2到b2分别连边,不妨设i1向p2连边,流量为1,费用为|i - ...

  6. solr 4.3.0 配置

    scheme.xml <?xml version="1.0" encoding="UTF-8" ?> <schema name="t ...

  7. 当进入log文件后就卡机

     问题:一个目录打开,终端就卡死不动了 Ctrl+c也没用,cat一样没用? 解决办法:用的时间或用的数量删除(时间已经否决掉) ls -t |tail -1000 |xargs rm 原因: log ...

  8. 重点关注之OData with List

    OData是什么 官方解释:The Open Data Protocol (OData) is a data access protocol for the web. OData provides a ...

  9. Servlet作业--实现注册和登录

    1.注册页面  zhuce.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  10. HDU 4046 Panda

    线段树单点更新,要注意两段合并多出的答案的计算即可 //======================================================================== ...