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道具的占位符文本在输入开始时就消失了。为了实现您想要的操作，可以将Text组件覆盖在TextInput组件上，并将其样式映射到状态变量。聚焦后，相应地更改Text组件的样式。

Answer 2

哥们，有两件事 1.默认情况下，React-Native材质输入框仅在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

响应本机表单设计

2 个答案: