React Native 组件之TextInput
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的更多相关文章
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- React Native组件(二)View组件解析
相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...
- 从零学React Native之11 TextInput
TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式. 与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本 ...
- React Native组件之Text
React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- react native组件的生命周期
react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...
- react native组件的创建
react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...
- React Native组件(三)Text组件解析
相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...
- Android React Native组件的生命周期及回调函数
熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...
随机推荐
- 张艾迪(创始人):世界级天才女孩Eidyzhang
让整个世界与我们一同解读世界第一天才:Eidyzhang 她改变了整个世界.她的故事也激励了整个世界的不论亚洲.欧洲.非洲.南美州.北美洲.南极洲 天才Eidyzhang的故事激励了整个世界不论黑人. ...
- ScrollView嵌套StackView提示需要宽度和高度限制
场景: 在一个xib的view中,添加一个ScrollView,再在这个ScrollView中添加一个StackView,StackView中不加控件(用代码动态加). 问题: 提示ScrollVie ...
- C++实现对树的创建和前中后序遍历
#include<iostream>#include<stdio.h> using namespace std; class BitNode{ public: char dat ...
- BZOJ1747 [Usaco2005 open]Expedition 探险
首先我们可以发现如果错过了一个加油站,而继续往前走的时候没有油了,可以再假装之前经过加油站的时候加过油 于是我们维护一个大根堆,表示错过的加油站是哪些,每当没有油的时候从堆顶取出最大值加上去即可 /* ...
- 如何对HTML进行编码和解码?
答案:这个比较简单//HTML进行编码和解码Console.WriteLine(System.Web.HttpUtility.HtmlEncode("<h1>我是中文字符!< ...
- Eclipse中SVN的安装步骤(两种)和使用方法 [转]
一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tigri ...
- NimBus一个好的开发框架
NimbusKit是一个非常适合有经验的开发人员使用的iOS开发框架,具备完整的文档,并且提供了模块化的方式来解决iOS开发中的各种不同需求.最重要的是,该框架会经常添加一些新的组件和功能. Nimb ...
- mysql的REGEXP 和like的详细研究和解释
1 regexp ^ 匹配字符串的开始部分 $ 匹配字符串的结束部分 . 匹配任何字符(包括回车和新行) a* 匹配0或多个a字符的任何序列 a+ 匹配1个或多个a字符的任何序列 a? 匹配0个或1个 ...
- UDPsocket编程
socket编程UDP模式, package com.wtd.socket.udp; import java.io.IOException; import java.net.DatagramPacke ...
- SQL 修改数据库架构名
SQl 修改数据库架构名 declare @name sysname declare csr1 cursor for select TABLE_NAME from INFORMATION_SCHEMA ...