如何在 React Native 中创建基本的文本输入？

文本输入是允许用户通过键盘输入文本的基本组件。它广泛用于移动应用程序，用于获取用户名、密码、用户详细信息等。

在 React Native 中，我们有一个 TextInput 组件来实现这一点。它带有许多道具，可以帮助我们根据需要修改组件。

下面列出了一些必要的道具：

1. placeholder ：在用户输入任何文本之前将呈现的字符串。
2. value ：为文本输入显示的实际值。
3. defaultValue ：提供一个初始值，当用户开始输入时该值会改变。
4. keyboardType ：确定要打开的键盘。 egnumeric、phone-pad、email-address。
5. maxLength ：限制用户可以输入的最大字符数。
6. multiline ：如果为true，文本输入可以是多行，默认值为false。
7. onChangeText ：文本输入的文本更改时调用的回调。更改的文本作为单个字符串参数传递给回调处理程序。
8. onSubmitEditing ：当用户按下文本输入的提交按钮时调用的回调。
9. secureTextEntry ：如果为真，输入字符串将被加密。您可以将其用于密码字段。

除了这些必要的 props，React Native 还提供了许多其他的 props。你可以在 React Native 官方文档中查看。但这些是创建基本文本输入最重要的。

方法：我们将看到 TextInput 组件的 2 个示例。在第一个示例中，我们创建了一个简单的 TexInput，它从用户那里获取输入文本并将该文本显示在警报框中。

在第二个示例中，我们将创建一个登录屏幕，用户可以在其中输入他们的电子邮件地址和密码进行登录。

创建反应应用程序：

第 1 步：打开终端并运行以下命令。它将在您的系统中全局安装 Expo CLI。

npm install -g expo-cli

第 2 步：现在，通过运行以下命令创建一个新的 React Native 项目。

expo init "Your_Project_Name"

第 3 步：您将被要求选择一个模板。选择空白模板。

空白模板

第 4 步：现在转到项目文件夹并运行以下命令来启动服务器。

cd "Your_Project_Name"
npm start

项目结构：它将如下所示。

项目结构

示例 1：打开App.js文件并在该文件中写入以下代码。

App.js是运行应用程序时首先呈现的主文件。这里我们将使用 React Native 提供的 TextInput 组件。我们将在这个组件中传递 4 个 props placeholder、value、onChangeText 和 onSubmitEditing。

我们还将创建一个状态来存储用户插入的字符串。我们使用 onChangeText 属性将输入字符串设置为消息状态。当用户按下键盘上的提交按钮时，将使用消息调用警报。

Javascript

import { StyleSheet, SafeAreaView, TextInput } from "react-native";
import { useState } from "react";
  
export default function App() {
    const [message, setMessage] = useState("");
  
    return (
        
             setMessage(text)}
                onSubmitEditing={() => alert(`Welcome to ${message}`)}
            />
        
    );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
    },
});

输出：

文本输入组件

示例 2：打开App.js文件并在该文件中写入以下代码。

在这个文件中，我们将创建 2 个 TextInput 组件、电子邮件和密码。用户可以输入他们的电子邮件和密码登录。我们还将使用 secureTextEntry 属性作为密码字段。当用户按下键盘上的提交按钮时，会显示一个警报。

我们还将对 TextInput 组件应用样式。

Javascript

import { StyleSheet, SafeAreaView, TextInput, Text } from "react-native";
import { useState } from "react";
  
export default function App() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
  
    return (
        
            GeeksforGeeks
             setEmail(text)}
                keyboardType="email-address"
                style={styles.input}
            />
             setPassword(text)}
                keyboardType="visible-password"
                secureTextEntry
                style={styles.input}
                onSubmitEditing={() => alert("Welcome to GeeksforGeeks")}
            />
        
    );
}
  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#228B22",
        alignItems: "center",
        justifyContent: "center",
    },
    title: {
        fontSize: 40,
        color: "#fff",
        marginBottom: 20,
        fontWeight: "bold",
    },
    input: {
        backgroundColor: "#fff",
        padding: 10,
        width: "80%",
        marginTop: 15,
        color: "#000",
    },
});

输出：

文本输入组件