React原生表单设计

Question

我想在react native中创建具有材料输入文本的表单。与此处所示的https://material.angular.io/components/input/overview相同

以下是我的代码

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

     export default class App extends Component<Props> {
         render() {
            return <TextInput style={styles.abcd} placeholder="Enter name" />;
        }
    }

     const styles = StyleSheet.create({
       abcd: {
              borderBottomWidth: 0.25,
              marginVertical: 2,
              paddingHorizontal: 10
         }
       });

在这里，我使用了占位符，但是如果您在给定的链接中看到表单，那么它就不是占位符。此外，当我们单击该字段时，文本将向上移动。这也是我想在这里实现的目标。我不想使用任何库，比如textField或任何其他库。

Answer 1

TextInput组件上的placeholder属性使占位符文本在输入开始时消失。要实现您想要的功能，可以将文本组件覆盖在TextInput组件上，并将其样式映射到状态变量。获得焦点后，相应地更改文本组件的样式。

Answer 2

伙计，有两件事1. React-Native material输入框默认情况下只在Android中可用。2.在iOS (iPhone或iPad)上，您将看到正常的InputBox

要查看iOS设备上的材料输入框，您必须进行大量编码。最好的解决方案是集成像react-native-paper这样的第三方库

请在这里参考react-native-paper库的工作示例

https://github.com/callstack/react-native-paper/blob/master/example/src/TextInputExample.js