从入门小白到精通，玩转React Native鸿蒙跨平台开发：允许键盘输入文本的TextInput组件

React Native的TextInput组件是用于用户文本输入的核心控件，支持单行/多行输入、键盘类型设置、样式定制等功能。通过onChangeText事件监听输入变化并更新状态，同时可设置placeholder、secureTextEntry等属性来满足不同场景需求。使用时需注意平台差异，如Android的键盘弹出问题和多行模式下边框样式限制。组件底层基于原生控件实现，开发者可通过状态管理实

2401_86113894

761人浏览 · 2025-12-02 17:06:52

2401_86113894 · 2025-12-02 17:06:52 发布

TextInput

TextInput 是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。

最简单的用法就是丢一个TextInput到应用里，然后订阅它的onChangeText事件来读取用户的输入。注意，从 TextInput 里取值这就是目前唯一的做法！也就是使用在onChangeText中用setState把用户的输入写入到 state 中，然后在需要取值的地方从 this.state 中取出值。它还有一些其它的事件，譬如onSubmitEditing和onFocus。

注意有些属性仅在multiline为 true 或者为 false 的时候有效。此外，当multiline=false时，为元素的某一个边添加边框样式（例如：borderBottomColor，borderLeftWidth等）将不会生效。为了能够实现效果你可以使用一个View来包裹TextInput

在鸿蒙系统中上长按选择文本会导致windowSoftInputMode设置变为adjustResize，这样可能导致绝对定位的元素被键盘给顶起来。要解决这一问题你需要在 AndroidManifest.xml 中明确指定合适的windowSoftInputMode

<在React Native中，TextInput组件是用于创建文本输入框的。它允许用户输入文本并将其存储在状态中，这对于构建如登录表单、搜索栏等界面元素非常有用。下面是一些关于如何在React Native中使用TextInput组件的详细信息：

导入TextInput组件

首先，确保你已经导入了TextInput组件。在React Native项目中，你可以这样导入它：

import { TextInput } from 'react-native';

创建TextInput组件

在JSX中，你可以创建一个TextInput组件，并通过各种属性来定制其行为和外观。例如：

<TextInput
  style={styles.input}
  placeholder="Enter text"
  onChangeText={text => this.setState({ text })}
  value={this.state.text}
/>

常用属性

TextInput有许多可用的属性，以下是一些常用的属性及其说明：

style: 用于定义文本输入框的样式，通常使用StyleSheet.create()来定义。
placeholder: 当文本输入框为空时显示的占位符文本。
placeholderTextColor: 占位符文本的颜色。
value: 输入框的当前值，通常与组件的状态相关联。
onChangeText: 当文本变化时调用的函数，通常用于更新状态。
keyboardType: 键盘类型，如numeric、email-address等。
secureTextEntry: 是否隐藏输入的文本，常用于密码输入。
autoFocus: 是否自动聚焦输入框。
autoCapitalize: 文本输入时自动首字母大写，选项有none、sentences、words、characters。
autoCorrect: 是否自动纠正拼写错误。
multiline: 是否支持多行输入。
numberOfLines: 在多行模式下，指定最大行数。
onSubmitEditing: 当用户提交输入（例如点击“完成”按钮）时调用。

示例代码

以下是一个完整的示例，展示如何在一个React Native应用中使用TextInput：

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' }; // 初始化状态为空字符串
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          placeholder="Enter text"
          onChangeText={text => this.setState({ text })} // 更新状态以保存输入的文本
          value={this.state.text} // 将输入框的值绑定到状态中的文本值上
        />
        <Text>You entered: {this.state.text}</Text> {/* 显示用户输入的文本 */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 8, // 左右内边距为8px
  },
});

在这个示例中，我们创建了一个简单的应用，其中包含一个文本输入框和一个显示用户输入文本的标签。每当用户在文本框中输入文本时，状态会更新，并且标签会显示最新的输入值。这是通过在onChangeText属性中调用一个更新状态的函数来实现的。通过这种方式，React Native使管理用户输入变得简单而直观。

完整实例案例演示：

这段React Native代码展示了文本输入组件的完整实现，其核心原理涉及React Native的组件系统、状态管理机制和用户交互处理。

TextInput组件是React Native中的核心输入控件，其底层实现基于平台原生组件。在iOS上，它对应的是UITextField（单行）或UITextView（多行）；在Android上，它使用EditText类。这些原生组件通过React Native的桥接层与JavaScript代码进行通信。

状态管理使用React的useState Hook来跟踪三个不同的状态：text存储普通文本输入内容，number存储数字输入，value存储多行文本内容。isFocused状态用于管理输入框的焦点效果，这是提升用户体验的重要细节。

import React from 'react';
import { SafeAreaView, StyleSheet, TextInput, Text, View, TouchableOpacity } from 'react-native';

const TextInputExample = () => {
  const [text, onChangeText] = React.useState('Useless Text');
  const [number, onChangeNumber] = React.useState('');
  const [isFocused, setIsFocused] = React.useState(false);
  const [value, onChangeMultilineText] = React.useState('Useless Multiline Placeholder');

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.inputContainer}>
        <Text style={styles.label}>Text Input</Text>
        <TextInput
          style={[styles.input, isFocused && styles.inputFocused]}
          onChangeText={onChangeText}
          value={text}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
        />
      </View>
      <View style={styles.inputContainer}>
        <Text style={styles.label}>Number Input</Text>
        <TextInput
          style={[styles.input, isFocused && styles.inputFocused]}
          onChangeText={onChangeNumber}
          value={number}
          placeholder="Enter a number"
          keyboardType="numeric"
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
        />
      </View>
      <TextInput
        editable
        multiline
        numberOfLines={4}
        maxLength={40}
        onChangeText={text => onChangeMultilineText(text)}
        value={value}
        style={{padding: 10}}
      />
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Submit</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  inputContainer: {
    marginBottom: 50,
  },
  label: {
    fontSize: 16,
    marginBottom: 8,
    color: '#333',
  },
  input: {
    height: 50,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 10,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  inputFocused: {
    borderColor: '#007AFF',
    shadowColor: '#007AFF',
    shadowOpacity: 0.2,
  },
  button: {
    height: 50,
    borderRadius: 8,
    backgroundColor: '#007AFF',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default TextInputExample;