如何在 react-native 中使用帮助文本创建文本输入？

React native 是 Facebook 开发的一个框架，用于在一种通用语言 JavaScript 下为 iOS 和 Android 创建原生风格的应用程序。最初，Facebook 只开发了 React Native 来支持 iOS。但是，由于最近支持 Android 操作系统，该库现在可以为这两个平台呈现移动 UI。

先决条件：

reactjs的基础知识。
具有 ES6 语法的 Html、css 和 javascript。
NodeJs 应该安装在您的系统中（安装）。
Jdk 和 android studio 用于在模拟器上测试您的应用程序（安装）。

方法：在本文中，我们将看到如何创建一个在其下方显示帮助文本的文本输入。我们将使用 react-native-paper 库来显示帮助文本。帮助文本显示提示。它可以是可以帮助用户填写输入字段的文本，也可以是显示错误文本。我们将逐步了解该方法。

下面是分步实现：

第 1 步：使用以下命令在 react-native 中创建一个项目：

npx react-native init DemoProject

第 2 步：使用以下命令安装 react-native paper：

npm install react-native-paper

第 3 步：在您的项目中创建一个组件文件夹。在 components 文件夹中创建一个文件 HelperText.js。

项目结构：它看起来像这样。

示例：写下相应文件中的代码。在 HelperText.js 中，我们从 react-native-paper 库中导入了 HelperText 和 TextInput。 HelperText 使用 props类型并且可见：

type：根据需要可以取两个值中的任意一个。
可见：显示或隐藏提示可以是真或假。

HeplerText.js

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { HelperText, TextInput } from 'react-native-paper';
  
const HelperTextExample = () => {
  const [emailId, setEmailId] = useState('');
  const [platform, setPlatform] = useState('');
  
  const checkErrors = () => {
    return !emailId.includes('@');
  };
  
  const checkString = () => {
    return platform === 'Geeks';
  };
  
  return (
    
       setPlatform(text)}
      />
      Geeks for Geeks
  
       setEmailId(text)} />
      
        Email Id is invalid
      
    
  );
};
  
export default HelperTextExample;
  
const styles = StyleSheet.create({
  container: {
    padding: 25,
  },
});

App.js

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
  
import HelperTextExample from './components/HelperText';
  
const App: () => Node = () => {
  return (
    
      
    
  );
};
  
export default App;

应用程序.js

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
  
import HelperTextExample from './components/HelperText';
  
const App: () => Node = () => {
  return (
    
      
    
  );
};
  
export default App;

运行应用程序的步骤：使用以下命令运行应用程序：

npx react-native run-android

输出：

参考： https://callstack.github.io/react-native-paper/helper-text.html