响应本机表单设计

时间:2018-12-03 04:37:49

标签: react-native

我想以具有本机输入文本的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之类的任何库或任何其他库。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

哥们, 有两件事  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