React-Native做一个文本输入框组件的实现代码
由于最近一直在做公司的项目，而且比较急。如今项目已经迭代到第三期，可以缓一缓了。。。
说实话，最近一直再用android做开发，而且时间也不宽裕，react-native有点生疏了。
好了，废话不多说，今天在做登录界面的时候，我发现，登录注册的文本框样式都是一个样的，如果一个一个的写，就会显得有些麻烦了，于是我就简单的封装了一下TextInput这一个组件
上图就是我放到登录界面的效果啦。
代码：
import React, { Component } from 'react';
import {
Text,
TextInput,
View,
PropTypes,
StyleSheet,
ToastAndroid
} from 'react-native'
class TextInputLogin extends Component {
static propTypes = {
name: React.PropTypes.string,
txtHide: React.PropTypes.string,
ispassword: React.PropTypes.bool
}
static defaultProps = {
name: '名称',
txtHide: '内容',
ispassword: false,
}
constructor (props) {
super (props)
this.state = {
txtValue: "",
}
}
render () {
var { style, name, txtHide, ispassword } = this.props
return(
<View style={styles.container,style}>
<View style={styles.txtBorder}>
<Text style={styles.txtName}>{name}</Text>
<TextInput
underlineColorAndroid = {'transparent'}
style={styles.textInput}
multiline={false}
placeholder={txtHide}
password={ispassword}
onChangeText={(text) => {
this.setState({
txtValue: text
})
}}
value={this.state.txtValue}
/>
</View>
</View>
)
}
getValue () {
return this.state.txtValue
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
flexDirection: 'row'
},
txtBorder: {
height: 50,
flex: 1,
borderWidth: 1,
borderColor: '#51A7F9',
marginLeft: 50,
marginRight: 50,
borderRadius: 25,
flexDirection: 'row'
},
txtName: {
height: 20,
width: 40,
marginLeft: 20,
fontSize: 15,
marginTop: 15,
color: '#51A7F9',
marginRight: 10,
fontSize: 14
},
textInput: {
height: 50,
width: 200
}
})
module.exports = TextInputLogin;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
ReactNative Alert详解及实例代码
Alert顾名思义一就是一个警告框,一般使用情况比如:退出登录,清楚缓存,提示修改密码等等...ReactNative中的Alert只有一个静态方法alert()其中有四个参数:标题,信息,按钮和按钮类型 在Android按钮至多有三个 下面是使用情况: 实例代码: /** * Created by Administrator on 2016/9/12. */ import React, {Component} from 'react'; import { StyleSheet, View, T
-
React-Native实现ListView组件之上拉刷新实例（iOS和Android通用）
在web应用中,上拉刷新加载更多,下拉刷新列表的操作非常常见,那么在React-Native中是如何实现呢,我们具体来看一下 ReactNative提供了RefreshControl下拉刷新组件,但是没有提供上拉刷新组件,上拉刷新在App中是很常用的. 今天我们来实现一个iOS和Android通用的上拉刷新功能. 下面简要介绍下我实现的思路. 思路: 1.常量定义: const moreText = "加载完毕"; //foot显示的文案 //页码 var pageNum = 1; /
-
react native带索引的城市列表组件的实例代码
城市列表选择是很多app共有的功能,比如典型的美图app.那么对于React Native怎么实现呢? 要实现上面的效果,首先需要对界面的组成简单分析,界面的数据主要由当前城市,历史访问城市和热门城市组成,所以我们在提供Json数据的时候就需要将数据分为至少3部分. const ALL_CITY_LIST = DATA_JSON.allCityList; const HOT_CITY_LIST = DATA_JSON.hotCityList; const LAST_VISIT_CITY_LIST
-
IOS React Native FlexBox详解及实例
IOS React Native FlexBox详解及资料整理, # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 什么是 FlexBox 布局 在 html 中,界面的搭建都是采用 C
-
react native仿微信PopupWindow效果的实例代码
在原生APP开发中,相信很多开发者都会见到这种场景:点击右上角更多的选项,弹出一个更多界面供用户选择.这种控件在原生开发中Android可以用PopupWindow实现,在iOS中可以用CMPopTipView,也可以自己写一个View实现.其类似的效果如下图所示: 实现思路分析: 要实现上面的视图,有很多种实现方式.前面的文章说过,要实现弹框相关的可以用React Native 提供的 Modal组件(Modal组件),使用Modal组件可以实现我们原生开发中的大多数效果. 要实现下拉三角,可
-
react native实现往服务器上传网络图片的实例
如下所示: let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现图片上传 * @param {string} url 接口地址 * @param {JSON} params body的请求参数 * @return 返回Promise */ function uploadImage(url,params){ return new Promise(fun
-
React Native第三方平台分享的实例（Android，IOS双平台）
本文主要介绍了React Native第三方平台分享的实例(Android,IOS双平台),分享给大家,具体如下: 源码已开源到Github,地址请点击:react-native-share[一行代码,双平台分享] 目前支持分享的平台有[QQ][QQ空间][微信][朋友圈][微博][FaceBook] 欢迎大家star,fork..... [ Android平台配置 ] 1. app目录下创建 libs 文件夹,添加依赖文件[直接复制源码中 libs 目录即可] 2. app / src /
-
React Native仿美团下拉菜单的实例代码
本文介绍了React Native仿美团下拉菜单的实例代码,最近也在学习React Native,顺便分享给大家 在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可.如果使用React Native开发上面的效果,需要注意几个问题: 1. 在下拉的时候有动画过度效果: 2.下拉菜单出现后点击菜单项,菜单项可选择,并触发对应的事件: 3.下拉菜单中的项目可以配置: 要实现弹框效果,我们马上回想到使用Mo
-
react-native中AsyncStorage实例详解
react-native中AsyncStorage实例详解 AsyncStorage是一个简单的,具有异步特性的储存API,它的储存方式为键值对的方式,且对整个App而言,是全局的. AsyncStorage提供了较全的方法供我们使用,每个方法都有一个回调函数,而回调函数的第一个参数都是错误对象error,所有的方法执行之后都会返回一个Promise对象. 方法: static getItem(key: string, callback?: ?(error: ?Error, result: ?s
-
React-Native做一个文本输入框组件的实现代码
由于最近一直在做公司的项目,而且比较急.如今项目已经迭代到第三期,可以缓一缓了... 说实话,最近一直再用android做开发,而且时间也不宽裕,react-native有点生疏了. 好了,废话不多说,今天在做登录界面的时候,我发现,登录注册的文本框样式都是一个样的,如果一个一个的写,就会显得有些麻烦了,于是我就简单的封装了一下TextInput这一个组件 上图就是我放到登录界面的效果啦. 代码: import React, { Component } from 'react'; import
-
用React Native制作一个简单的游戏引擎
简介 今天我们将学习如何使用React Native制作一个游戏.因为我们使用的是React Native,这个游戏将是跨平台的,这意味着你可以在Android.iOS和网络上玩同一个游戏.然而,今天我们将只关注移动设备.所以我们开始吧. 开始吧 要制作任何游戏,我们需要一个循环,在我们玩的时候更新我们的游戏.这个循环被优化以顺利运行游戏,为此我们将使用 React Native游戏引擎 . 首先让我们用以下命令创建一个新的React Native应用. npx react-native ini
-
React Native 中限制导入某些组件和模块的方法
目录 限制使用 Touchable 限制使用 Image 同时限制两者 示例 有些时候,我们不希望使用某些组件,而是想使用其他组件.这时候,我们可以使用一个名为 no-restricted-imports 的eslint 规则,该规则允许你指定一个或多个组件的名称,以防止使用这些组件. no-restricted-imports 是 eslint 自带的一个规则,我们不需要额外引入一个插件. 限制使用 Touchable 假如我们希望小伙伴们不要使用 Touchable 系列组件,而是使用 Pr
-
React Native使用百度Echarts显示图表的示例代码
Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表.相信很多同学在网页端都使用过.今天我就来介绍下在React Native中如何使用Echarts来显示各种图表. 首先需要在我们的React Native项目中安装native-echarts组件,该组件是兼容IOS和安卓双平台的. 安装 npm install native-echarts --save 安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts. 目录结构如下图所示: 基础
-
使用Python来做一个屏幕录制工具的操作代码
一.写在前面 作为一名测试,有时候经常会遇到需要录屏记录自己操作,方便后续开发同学定位.以前都是用ScreenToGif来录屏制作成动态图,偶尔的机会看到python也能实现.那就赶紧学习下. 二.效果展示 三.知识串讲 这次要讲的东西可能比较多了,涉及到pyqt5 GUI软件的制作.QThread多线程的使用.Sikuli库的图形操作.win32库的模拟键盘操作.cv2库的写视频文件等.下面我们一点点来蚕食我这次写的代码. 1.GUI界面制作 这次我用的是现成的Pyqt5界面布局类,QVBox
-
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下所示: 有一张user表和留言表,关系为一对多,留言表有父留言字段的id,和自身有一个一对多的关系,建表语句如下: CREATE TABLE `message` ( `id` int NOT NULL AUTO_INCREMENT, `date` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, `content` text
-
Bootstrap输入框组件简单实现代码
Bootstrap输入框组件的学习代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,initial-s
-
java通过JFrame做一个登录系统的界面完整代码示例
在java的JFrame内通过创建匿名对象的方式做登录界面 package com.sxt; import java.awt.Container; import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.J
-
Flutter 如何封装文本输入框组件
UI组件封装的考虑要点 封装一个 UI 组件,通常需要考虑下面这三个点: 接口如何定义:即组件接收什么输入参数来控制组件的外观和行为: 与业务分离:UI 组件应当只负责界面,而不负责业务,具体的业务应当由业务层完成: 简单易用:因为是 UI 组件,要尽可能地简单易用,方便使用者快速上手. 文本输入框接口定义 首先先看一下我们上一篇使用文本框的代码,这里实际上只是调用了一个函数返回新的组件,之所以要这么做是因为用户名.密码使用了成员属性,需要根据不同的成员属性来设置不同的行为,主要有: 文本框装饰