React Native 文本输入

17 Mar 2025 | 阅读 2 分钟

TextInput 是用于输入文本的基本组件。它有几个属性可以配置不同的功能，例如 onChangeText，它接受一个函数并在文本更改时调用它。 onSubmitEditing 属性接受一个函数，该函数在提交文本时被调用。

可以使用文本输入执行几件事，例如在用户输入时验证内部文本。

React Native TextInput 示例 1

在此示例中，我们创建一个 TextInput 并执行 onChangeText 操作。每次文本更改时，它都会调用 setState 并检查拆分条件。如果输入的文本找到 ' ' 空格，它将在文本中显示 '?'。文本在每次更改时都放置在状态中。

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

export default class PizzaTranslator extends Component {
    constructor(props) {
        super(props);
        this.state = {text: ''};
    }

    render() {
        return (
            <View style={{padding: 10}}>
                <TextInput
                    style={{height: 40,backgroundColor: 'azure', fontSize: 20}}
                    placeholder="Type here to translate!"
                    onChangeText={(text) => this.setState({text})}
                />
                <Text style={{padding: 100, fontSize: 50}}>
                    {this.state.text.split(' ').map((word) => word && '?').join(' ')}
                </Text>*
            </View>
        );
    }
}

输出

TextInput 属性

allowFontScaling	autoCapitalize	autoCorrect	autoFocus
blurOnSubmit	caretHidden	clearButtonMode	clearTextOnFocus
contextMenuHidden	dataDetectorTypes	defaultValue	disableFullscreenUI
editable	enablesReturnKeyAutomatically	inlineImageLeft	inlineImagePadding
keyboardAppearance	keyboardType	maxLength	multiline
numberOfLines	onBlur	onChange	onChangeText
onContentSizeChange	onEndEditing	onFocus	onKeyPress
onLayout	onScroll	onSelectionChange	onSubmitEditing
placeholder	placeholderTextColor	returnKeyLabel	returnKeyType
scrollEnabled	secureTextEntry	selection	selectionColor
selectionColor	selectionState	selectTextOnFocus	spellCheck
textContentType	style	textBreakStrategy	underlineColorAndroid

该方法 .focus() 和 .blur() 从原生元素中暴露出来。这些方法以编程方式聚焦或模糊 TextInput。

多行文本输入

multiline 属性提供了输入多行文本的便利。 TextInput 的某些属性仅与 multiline 兼容，例如 multiline={true/false}。属性 borderButtomColor 如果 multiline = false 将不起作用。

React Native TextInput 示例 2

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

class UselessTextInput extends Component {
    render() {
        return (
            <TextInput
                {...this.props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
                editable = {true}
                maxLength = {40}
            />
        );
    }
}
export default class UselessTextInputMultiline extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: 'Useless Multiline Placeholder',
        };
    }

    
    render() {
        return (
            <View style={{
                backgroundColor: this.state.text,
                borderBottomColor: '#000000',
                borderBottomWidth: 1,
               }}
            >
                <UselessTextInput
                    multiline = {true}
                    numberOfLines = {10}
                    onChangeText={(text) => this.setState({text})}
                    value={this.state.text}
                    style={{fontSize: 20}}
                />
            </View>
        );
    }
}

输出

下一个主题ActivityIndicator

← 上一个下一个 →

React Native 文本输入

React Native TextInput 示例 1

TextInput 属性

多行文本输入

React Native TextInput 示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native 文本输入

React Native TextInput 示例 1

TextInput 属性

多行文本输入

React Native TextInput 示例 2

相关帖子

Layout 和 Flexbox

React Native Picker

React Native FlatList

React Native Button

React Native ListView

React Native SectionList

ProgressBarAndroid

React Native State

高度和宽度

React Native View

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器