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

 更新时间:2016年10月08日 10:14:02   作者:顺子_RTFSC  
这篇文章主要介绍了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.container}>

        {/*账号输入框在这里用View包裹以便处理器样式*/}
        <View style={styles.textInputViewStyle}>
          <TextInput
            style={styles.textInputStyle}
            //站位符
            placeholder='手机号'/>
        </View>
        {/*密码输入框*/}
        <View style={styles.textInputViewStyle}>
          <TextInput
            style={styles.textInputStyle}
            placeholder='密码'
            //密文
            secureTextEntry={true}/>
        </View>

        {/*设置控件可点击*/}
        <TouchableOpacity onPress={()=>{alert('点击登录')}}>
          {/*登录按钮*/}
          <View style={styles.textLoginViewStyle}>
            <Text style={styles.textLoginStyle}>登录</Text>
          </View>
        </TouchableOpacity>

      </View>
    );
  }
}

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;

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

相关文章

  • React 使用browserHistory项目访问404问题解决

    React 使用browserHistory项目访问404问题解决

    这篇文章主要介绍了React 使用browserHistory项目访问404问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 搭建React Native热更新平台的详细过程

    搭建React Native热更新平台的详细过程

    这篇文章主要介绍了搭建React Native热更新平台,要实现 React Native 热更新功能,有四种思路 Code Push、Pushy、Expo 和自研,感兴趣的朋友一起通过本文学习吧
    2022-05-05
  • 解决React报错React Hook useEffect has a missing dependency

    解决React报错React Hook useEffect has a missing dependency

    这篇文章主要为大家介绍了解决React报错React Hook useEffect has a missing dependency,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React Native时间转换格式工具类分享

    React Native时间转换格式工具类分享

    这篇文章主要为大家分享了React Native时间转换格式工具类,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 详解React中多种组件通信方式的实现

    详解React中多种组件通信方式的实现

    在React中,组件之间的通信是一个非常重要的话题,React提供了几种方式来实现跨组件通信,下面小编将详细讲讲其中几种通信方式,并提供实际的代码示例,需要的可以参考下
    2023-11-11
  • 2个奇怪的react写法

    2个奇怪的react写法

    大家好,我卡颂。虽然React官网用大量篇幅介绍最佳实践,但因JSX语法的灵活性,所以总是会出现奇奇怪怪的React写法。本文介绍2种奇怪(但在某些场景下有意义)的React写法。也欢迎大家在评论区讨论你遇到过的奇怪写法
    2023-03-03
  • React-Hook中使用useEffect清除定时器的实现方法

    React-Hook中使用useEffect清除定时器的实现方法

    这篇文章主要介绍了React-Hook中useEffect详解(使用useEffect清除定时器),主要介绍了useEffect的功能以及使用方法,还有如何使用他清除定时器,需要的朋友可以参考下
    2022-11-11
  • React 实现车牌键盘的示例代码

    React 实现车牌键盘的示例代码

    这篇文章主要介绍了React 实现车牌键盘的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 使用React制作一个贪吃蛇游戏的代码详解

    使用React制作一个贪吃蛇游戏的代码详解

    Snake Game 使用 ReactJS 项目实现功能组件并相应地管理状态,开发的游戏允许用户使用箭头键控制蛇或触摸屏幕上显示的按钮来收集食物并增长长度,本文给大家详细讲解了如何使用 React 制作一个贪吃蛇游戏,需要的朋友可以参考下
    2023-11-11
  • react分页显示数据的方法

    react分页显示数据的方法

    分页在很多地方都可以用到,本文主要实现了react分页显示,主要使用三个组件,父组件listBox、列表组件List、按钮组件PageButton,感兴趣的可以了解一下
    2021-08-08

最新评论