React Native学习笔记(八)-TextInput 高度自适应

React Native TextInput 高度自适应

update

项目地址

有时我们需要根据默认的文字来显示TextInput的高度,而且可以随着文字的输入自动增加TextInput的高度。下面我们就来看一下这个是如何实现的:

TextInput属性介绍

代码伺候(去除无关代码)
/**
 * Created by Cral-Gates on 2017/5/11.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    ScrollView
} from 'react-native';
import NavigationBar from '../component/NavigationBar';
import NetUtil from '../utils/NetUtil';
import Global from '../utils/Global';

class NoteDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            noteContent: '',
            height: 50,
        }
    }

    componentDidMount() {
        this.setState({
            noteContent: this.props.noteDetail.content,
        });
    }

    render() {
        return (
            
                
                     this.setState({noteContent})}
                        onChange={() => this.onChange.bind(this)}
                        onContentSizeChange={(event) => this.onContentSizeChange(event)}/>
                
            
        )
    }
    
    onChange = (event) => {
        this.setState({
            noteContent: event.nativeEvent.text,
            height: event.nativeEvent.contentSize.height
        });
    };

    onContentSizeChange = (event) => {
        this.setState({
            height: event.nativeEvent.contentSize.height
        });
    }
}
    
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#f5f5f5'
    },
    noteDetailTitle: {
        backgroundColor: 'white',
        marginTop: 10,
        marginBottom: 2,
        marginLeft: 20,
        marginRight: 20,
        height: 35,
        fontSize: 18,
        fontWeight: '600'
    },
    noteDetailContent: {
        backgroundColor: 'white',
        marginLeft: 20,
        marginRight: 10,
        lineHeight: 20,
        fontSize: 16
    }
});

export default NoteDetail;
  • 首先创建构造函数

     constructor(props) {
         super(props);
         this.state = {
             noteContent: '',  //笔记内容
             height: 50,       //默认高度
         }
     }
    
  • 然后设置默认的笔记内容

      componentDidMount() {
          this.setState({
              noteContent: this.props.noteDetail.content  // 这是从上一个页面传递过来的值
          });
      }
    
  • TextInput属性介绍

       this.setState({noteContent})}
          onChange={() => this.onChange.bind(this)}
          onContentSizeChange={(event) => this.onContentSizeChange(event)}/>
    
    • onChange function 监听方法,文本框内容发生改变回调方法

        onChangeText = (text) => {
            this.setState({
                noteContent: text
            })
        }
      
    • onChangeText function监听方法,文本框内容发生改变回调方法,该方法主要是监听输入框文字的变化

        onChange = (event) => {
            this.setState({
                noteContent: event.nativeEvent.text
            });
        };
      
    • onContentSizeChange function监听方法,当文本框的高度发生变化时回调该方法。当TextInput的高度可变时,调用onLayout方法并将宽高传递给它,并重新绘制该组件。

        onContentSizeChange = (event) => {
            this.setState({
                height: event.nativeEvent.contentSize.height
            });
        }
      

至此就大功告成了!有什么问题可留言交流

你可能感兴趣的:(React Native学习笔记(八)-TextInput 高度自适应)