关注我们

React Native - TextInput

TextInput是输入文本的基本组件。它有几个配置不同函数的道具，例如onChangeText，它接受一个函数，并在文本更改时调用它。 onSubmitEditing有一个函数，在提交文本时会调用该函数。

在此示例中，我们创建一个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

多行TextInput

multiline 属性提供了输入多行文本。例如multiline = {true/false}。如果multiline = false，则属性borderButtomColor将不起作用。

复制代码

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

class UselessTextInput extends Component {
    render() {
        return (
            <TextInput
                {...this.props}//继承传递给它的任何道具；例如，下面的多行、numberOfLines
                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>
        );
    }
}