input组件android,React-Native TextInput组件详解及实例代码

同时适配Android和IOS

代码注释比较详细

/**

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

import React, {Component} from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

TextInput,

Platform,

TouchableOpacity,

} from 'react-native';

//获取屏幕信息

var Dimensions = require('Dimensions');

var width = Dimensions.get('window').width;

class TextInputG extends Component {

render() {

return (

{/*账号输入框在这里用View包裹以便处理器样式*/}

style={styles.textInputStyle}

//站位符

placeholder='手机号'/>

{/*密码输入框*/}

style={styles.textInputStyle}

placeholder='密码'

//密文

secureTextEntry={true}/>

{/*设置控件可点击*/}

{alert('点击登录')}}>

{/*登录按钮*/}

);

}

const styles = StyleSheet.create({

container: {

//设置占满屏幕

flex: 1,

// backgroundColor: 'black',

marginTop: 140,

//包裹输入框View样式

textInputViewStyle: {

//设置宽度减去30将其居中左右便有15的距离

width: width - 30,

height: 45,

//设置圆角程度

borderRadius: 18,

//设置边框的颜色

borderColor: 'blue',

//设置边框的宽度

borderWidth: 1,

//内边距

paddingLeft: 10,

paddingRight: 10,

//外边距

marginTop: 10,

marginLeft: 20,

marginRight: 20,

//设置相对父控件居中

alignSelf: 'center',

//输入框样式

textInputStyle: {

width: width - 30,

height: 35,

paddingLeft: 8,

backgroundColor: '#00000000',

// alignSelf: 'center',

//根据不同平台进行适配

marginTop: Platform.OS === 'ios' ? 4 : 8,

//登录按钮View样式

textLoginViewStyle: {

width: width - 30,

height: 45,

backgroundColor: 'red',

borderRadius: 20,

marginTop: 30,

alignSelf: 'center',

justifyContent: 'center',

alignItems: 'center',

//登录Text文本样式

textLoginStyle: {

fontSize: 18,

color: 'white',

});

module.exports = TextInputG;

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

input组件android,React-Native TextInput组件详解及实例代码相关推荐

android message 代码,Android Handler移除Message详解及实例代码
Android Handler移除Message详解问题: 1.removeMessage(what)函数是否只能移除对应what值的Message? 2.对于Delayed发送的Message,能 ...
android 设置listview滚动条,Android ListView 滚动条的设置详解及实例代码
Android ListView 滚动条的设置详解 1.滚动条的属性 android:scrollbarAlwaysDrawHorizontalTrack 设置是否始终显示水平滚动条.这里用Scrol ...
Android APP：Preference使用详解和实例（附源码）
Android APP:Preference使用详解和实例一.Preference 是Android app中重要的控件之一,Settings 模块大部分都是通过Preference 实现的,这里将 ...
Java 线程池详解及实例代码
转载自 Java 线程池详解及实例代码这篇文章主要介绍了Java 线程池的相关资料,并符实例代码,帮助大家学习参考,需要的朋友可以参考下线程池的技术背景在面向对象编程中,创建和销毁对象是很费时 ...
JavaScript 身份证号有效验证详解及实例代码
这篇文章主要介绍了JavaScript 身份证号有效验证详解及实例代码的相关资料,需要的朋友可以参考下 JavaScript验证身份证号 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
python随机数程序源码_Python 实现随机数详解及实例代码
Python3实现随机数 random是用于生成随机数的,我们可以利用它随机生成数字或者选择字符串. random.seed(x)改变随机数生成器的种子seed. 一般不必特别去设定seed,Pyth ...
java super实例_java Super 用法详解及实例代码
java Super 用法详解及实例代码发布于 2021-1-8| 复制链接摘记: java Super 用法详解 1)有人写了个很好的初始化属性的构造函数,而你仅仅想要在其中添加另一些自己新建 ...
mysql 字段 as_mysql 字段as详解及实例代码
mysql 字段使用as 在mysql中,select查询可以使用AS关键字为查询的字段起一个别名,该别名用作表达式的列名,并且别名可以在GROUP BY,ORDER BY或HAVING等语句中使用. ...
一文数学数模-相关性分析(二)斯皮尔曼相关(spearman)相关性分析一文详解+python实例代码
前言相关性分析算是很多算法以及建模的基础知识之一了,十分经典.关于许多特征关联关系以及相关趋势都可以利用相关性分析计算表达.其中常见的相关性系数就有三种:person相关系数,spearman相关系 ...
坐标移动c语言,C语言坐标移动详解及实例代码
搜索热词题目描述开发一个坐标计算工具, A表示向左移动,D表示向右移动,W表示向上移动,S表示向下移动.从(0,0)点开始移动,从输入字符串里面读取一些坐标,并将最终输入结果输出到输出文件里面. ...

input组件android,React-Native TextInput组件详解及实例代码

input组件android,React-Native TextInput组件详解及实例代码相关推荐

最新文章

热门文章