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. 张艾迪(创始人):世界级天才女孩Eidyzhang

    让整个世界与我们一同解读世界第一天才:Eidyzhang 她改变了整个世界.她的故事也激励了整个世界的不论亚洲.欧洲.非洲.南美州.北美洲.南极洲 天才Eidyzhang的故事激励了整个世界不论黑人. ...

  2. ScrollView嵌套StackView提示需要宽度和高度限制

    场景: 在一个xib的view中,添加一个ScrollView,再在这个ScrollView中添加一个StackView,StackView中不加控件(用代码动态加). 问题: 提示ScrollVie ...

  3. C++实现对树的创建和前中后序遍历

    #include<iostream>#include<stdio.h> using namespace std; class BitNode{ public: char dat ...

  4. BZOJ1747 [Usaco2005 open]Expedition 探险

    首先我们可以发现如果错过了一个加油站,而继续往前走的时候没有油了,可以再假装之前经过加油站的时候加过油 于是我们维护一个大根堆,表示错过的加油站是哪些,每当没有油的时候从堆顶取出最大值加上去即可 /* ...

  5. 如何对HTML进行编码和解码?

    答案:这个比较简单//HTML进行编码和解码Console.WriteLine(System.Web.HttpUtility.HtmlEncode("<h1>我是中文字符!< ...

  6. Eclipse中SVN的安装步骤(两种)和使用方法 [转]

    一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tigri ...

  7. NimBus一个好的开发框架

    NimbusKit是一个非常适合有经验的开发人员使用的iOS开发框架,具备完整的文档,并且提供了模块化的方式来解决iOS开发中的各种不同需求.最重要的是,该框架会经常添加一些新的组件和功能. Nimb ...

  8. mysql的REGEXP 和like的详细研究和解释

    1 regexp ^ 匹配字符串的开始部分 $ 匹配字符串的结束部分 . 匹配任何字符(包括回车和新行) a* 匹配0或多个a字符的任何序列 a+ 匹配1个或多个a字符的任何序列 a? 匹配0个或1个 ...

  9. UDPsocket编程

    socket编程UDP模式, package com.wtd.socket.udp; import java.io.IOException; import java.net.DatagramPacke ...

  10. SQL 修改数据库架构名

    SQl 修改数据库架构名 declare @name sysname declare csr1 cursor for select TABLE_NAME from INFORMATION_SCHEMA ...