React Native组件（四）TextInput组件解析

最新推荐文章于 2024-09-10 05:11:07 发布

原创

最新推荐文章于 2024-09-10 05:11:07 发布 · 4.4k 阅读

标签

#react-native #TextInput

相关文章
React Native探索系列
 React Native组件系列

1 概述

TextInput组件和Text组件类似，内部都没有使用FlexBox布局，不同的是TextInput组件支持文字的输入，因为支持文字输入， TextInput组件要比Text组件多了一些属性和方法。TextInput组件支持Text组件所有的Style属性，而TextInput组件本身是没有特有的Style属性的。

2 属性

TextInput组件支持所有的View组件的属性，除此之外，它还有许多其他属性。

2.1 onChangeText

当输入框的内容发生变化时，就会调用onChangeText。
index.android.js

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, TextInput, Button,Alert} from 'react-native';
class TextApp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchText: ""
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.searchBar}>
                    <TextInput style={styles.input} placeholder='请输入内容'
                               onChangeText={(text) => {
                                   this.setState({searchText: text});
                               }}/>
                    <Button style={styles.button} title='搜索'
                            onPress={
     
      () => {
                                Alert.alert('输入的内容为:' + this.state.searchText);
                            }
                            }/>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    searchBar: {
        flexDirection: 'row',
        height: 45,
        justifyContent: 'center',
        alignItems: 'center'
    },
    input: {
        flex: 1,
        borderColor: 'gray'
    },
    button: {
        flex: 1
    }
});
AppRegistry.registerComponent('ViewSample', () => TextApp);