关闭

[React Native]高度自增长的TextInput组件

标签: TextInput自增长rn
1618人阅读 评论(0) 收藏 举报
分类:

之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性。

在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下:
这里写图片描述
这时候我们需要自定义一个组件:
在项目中创建AutoExpandingTextInput.js

import React, {Component} from 'react';
import {AppRegistry, TextInput, StyleSheet} from 'react-native';

export default class AutoExpandingTextInput extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            text: '',
            height: 0
        };
        this.onChange = this.onChange.bind(this);
    }

    onChange(event) {
        console.log(event.nativeEvent);
        this.setState({
            text: event.nativeEvent.text,
            height:event.nativeEvent.contentSize.height
        });
    }
    onContentSizeChange(params){
        console.log(params);
    }
    render() {
        return (
            <TextInput {...this.props}  //将组件定义的属性交给TextInput
                multiline={true}
                onChange={this.onChange}
                onContentSizeChange={this.onContentSizeChange}
                style={[styles.textInputStyle,{height:Math.max(35,this.state.height)}]}
                value={this.state.text}
            />
        );
    }
}

const styles = StyleSheet.create({
    textInputStyle: { //文本输入组件样式
        width: 300,
        height: 30,
        fontSize: 20,
        paddingTop: 0,
        paddingBottom: 0,
        backgroundColor: "grey"
    }
});

在多行输入(multiline={true})的时候,可以通过onChange回调函数,获取内容的高度event.nativeEvent.contentSize.height,然后修改内容的高度。

接下来修改index.ios.js或者index.android.js 如下:

import AutoExpandingTextInput from './AutoExpandingTextInput';

class AwesomeProject extends Component {
    _onChangeText(newText) {
        console.log('inputed text:' + newText);
    }

    render() {
        return (
            <View style={styles.container}>
                <AutoExpandingTextInput
                    style={styles.textInputStyle}
                    onChangeText={this._onChangeText}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    textInputStyle: { //文本输入组件样式
        width: 300,
        height: 50,
        fontSize: 20,
        paddingTop: 0,
        paddingBottom: 0,
        backgroundColor: "grey"
    }
});

当然我们知道在IOS端TextInput/Text组件默认不会水平居中的,需要在外层额外嵌套一层View,可以参考从零学React Native之10Text
运行结果:

这里写图片描述

更多精彩请关注微信公众账号likeDev
这里写图片描述

0
0
查看评论

react native textInput随内容高度设置textinput高度

react native textInput随内容高度设置textinput自动增长高度...............................
  • qq_33545491
  • qq_33545491
  • 2016-11-21 11:42
  • 2222

React Native 之TextInput 高度自增长扩展实现

新建一组件  ImageEqualEnlarge.js /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component }...
  • JLhaoran
  • JLhaoran
  • 2017-03-30 22:53
  • 818

[React Native]高度自增长的TextInput组件

之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性。在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这时候我们需要自定义一个组件: 在项目中创建AutoExpandingTextInput.jsi...
  • yulianlin
  • yulianlin
  • 2016-08-31 15:03
  • 1618

react-native-auto-expanding-textinput 根据输入的内容自增长高度

直接导入这个react-native-auto-expanding-textinput文件  就可以引用
  • xu0511522
  • xu0511522
  • 2016-12-30 16:26
  • 382

React-Native之TextInput实现高度自增长解决方案

前言TextInput在部分业务场景下, 需要随着字体多少进行高度自行调节,那么这个效果如何实现呢?方法为了方便重用,我们定义一个公用的组件:class AutoExpandingInput extends Component{ onContentSizeChange(event) { ...
  • jiangbo_phd
  • jiangbo_phd
  • 2017-03-08 15:00
  • 2644

React Native高度自增长的TextInput组件

React Native高度自增长的TextInput组件: 直接上代码:    this.state = {            comment:'',   //文本输入框内容  ...
  • H_Ydd
  • H_Ydd
  • 2017-08-24 17:12
  • 328

React Native控件之TextInput组件介绍以及实际登录界面实现

React Native控件之TextInput组件介绍以及实际登录界面实现(一)前言这一篇文章讲解一下文本输入框TextInput组件使用讲解以及模仿实现一下贵州银行登录界面效果。TextInput组件允许用户在应用中通过键盘进行输入文本信息。并且该组件还提供了多种配置属性:自动拼写修复、自动大小...
  • u014484863
  • u014484863
  • 2016-06-22 09:57
  • 8740

React Native学习笔记(3)--TextInput组件

本篇是在学习《React Native入门与实战》这本书时做的笔记,代码基于ES6实现的,算是对该书中代码的小小更新。1、TextInput介绍在一个应用中,少不了要用户输入一些信息,如:注册、登录,大部分App都需要支持搜索功能。TextInput就是这样的组件,用户可以通过键盘将文本输入到对应的...
  • dapan728
  • dapan728
  • 2017-07-08 10:38
  • 281

【React Native开发】- TextInput键盘输入文本

TextInput是一个允许用户通过键盘输入文本的的组件,该组件提供了多种配置的属性,如自动完成、自动大小写等等。 注意:通过onChangeText从TextInput中获取用户录入的文本是目前唯一的方法。
  • baidu_35701759
  • baidu_35701759
  • 2017-06-05 16:39
  • 1659

react native TextInput 对android 的适配

textInput 在iOS 显示正常,在android 会有一根线,以及字会被遮盖 属性加入: style={{padding:0}} underlineColorAndroid={'transparent'} 如果style里有其他padding的设置,把padd...
  • lpcz2010
  • lpcz2010
  • 2016-12-15 11:34
  • 2003
    个人资料
    • 访问:223866次
    • 积分:2637
    • 等级:
    • 排名:第16319名
    • 原创:74篇
    • 转载:1篇
    • 译文:0篇
    • 评论:238条
    关于我
    我的新书
    《爱上Android》已经出版
    本书绝不中庸,全是实用技术

    购买地址

    京东 天猫
    博客专栏
    最新评论