javascript - 如何在 react native 中构建一个文本输入，该文本输入具有一个占位符，单击时顶部会更改为 textview

Question

我对本机反应有点陌生，我有一个需要帮助的问题

如何在 React Native 中构建一个文本输入，该文本输入具有一个占位符，单击时会更改为顶部的文本视图？类似于下面的截图

空文本输入字段在默认状态下如下所示

输入数据的文本字段

看到空输入文本有一个占位符出现在输入文本字段的中间

参见第二张图，一旦用户开始在输入字段中输入文本，占位符文本就会移动到输入字段的顶部

标签： javascriptreact-native

Answer 1

最简单的方法是使用react-native-paper包和他们的文本输入：

import * as React from 'react';
import { TextInput } from 'react-native-paper';

const MyComponent = () => {
  const [text, setText] = React.useState('');

  return (
    <TextInput
      label="Email"
      value={text}
      onChangeText={text => setText(text)}
    />
  );
};

export default MyComponent;

结果：