在本机反应中在边框上输入文本标签答案

【问题标题】：Input text label on border in react native在本机反应中在边框上输入文本标签
【发布时间】：2021-09-17 11:37:30
【问题描述】：

我想创建一个这样的输入框：

但是我是这样设计的，不知道怎么在输入边框上加标签

我的代码是：

<InputBox label="Email" icon={true} keyboardType="email-address" defaultValue={emailId} onChangeText={text => setEmailId(text)} />

输入组件：

    import React from 'react';
import {View, StyleSheet, TextInput, Text} from 'react-native';
import {COLORS} from '../constants/colors';
import {FONT_FAMILY} from '../constants/font-family';

export default function InputBox(props) {
  return (
    <View style={styles.container}>
      <View style={{flex: 1}}>
        <Text style={styles.label}>{props.label}</Text>
        <TextInput
          placeholder={props.placeholder}
          placeholderTextColor="#9F9F9F"
          style={styles.input}
          keyboardType={props.keyboardType}
          secureTextEntry={false}
          defaultValue={props.defaultValue}
          onChangeText={props.onChangeText}
          editable={props.editable}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
    paddingTop: 7.5,
    paddingHorizontal: 12.5,
    paddingBottom: 2.5,
    borderRadius: 5,
    borderWidth: 0.75,
    borderColor: COLORS.WHITE,
  },
  input: {
    fontFamily: FONT_FAMILY.primaryMedium,
    fontSize: 14,
    height: 37,
    color: COLORS.WHITE,
  },
  label: {
    fontFamily: FONT_FAMILY.primary,
    marginLeft: 5,
    color: COLORS.WHITE,
    fontSize: 12,
    //  marginTop: -30,
  },
});

通过使用 react-native-paper，当我添加透明背景颜色时，它看起来像这样：

【问题讨论】：

标签： javascript react-native react-hooks

【解决方案1】：

如果您必须使用材质 ui 样式的组件，您可能想要使用 reactnativepaper

【讨论】：

是的，我试过了，但看起来不像我想要的

【解决方案2】：

您好，您可以使用此代码来实现从“反应”导入反应；

import {View, StyleSheet, Text} from 'react-native';

    import { TextInput } from 'react-native-paper';
    export default function InputBox(props) {
      return (
        <View style={styles.container}>
         <TextInput
         mode="outlined"
          label="Email"
          style={{width:'90%'}}
        />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        justifyContent:'center',alignItems:'center',
     flex:1
        
        // borderColor: COLORS.WHITE,
      },
      input: {
        // fontFamily: FONT_FAMILY.primaryMedium,
        fontSize: 14,
        height: 37,
        // color: COLORS.WHITE,
      },
      label: {
        // fontFamily: FONT_FAMILY.primary,
        marginLeft: 5,
        // color: COLORS.WHITE,
        fontSize: 12,
        //  marginTop: -30,
      },
    });

你可以在Snack上测试它

你也可以在这里阅读更多关于道具的信息react-native-paper

【讨论】：

【解决方案3】：

我能够完全在 React Native 中完成这项工作，而无需任何依赖。诀窍是将Text 放入背景颜色与屏幕相同的View 中，并绝对定位Text。我的示例代码硬编码了很多值，但如果您希望它具有响应性，您需要想出自己的方法来计算出这些值。代码：

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

const Input = () => {
    return (
        <View>
            <View style={styles.labelContainer}>
                <Text>Email Address</Text>
            </View>
            <View style={styles.inputContainer}>
                <TextInput placeholder="Enter email address" />
            </View>

        </View>
    );
}

const styles = StyleSheet.create({
    labelContainer: {
        backgroundColor: "white", // Same color as background
        alignSelf: "flex-start", // Have View be same width as Text inside
        paddingHorizontal: 3, // Amount of spacing between border and first/last letter
        marginStart: 10, // How far right do you want the label to start
        zIndex: 1, // Label must overlap border
        elevation: 1, // Needed for android
        shadowColor: "white", // Same as background color because elevation: 1 creates a shadow that we don't want
        position: "absolute", // Needed to be able to precisely overlap label with border
        top: -12, // Vertical position of label. Eyeball it to see where label intersects border.
    },
    inputContainer: {
        borderWidth: 1, // Create border
        borderRadius: 8, // Not needed. Just make it look nicer.
        padding: 8, // Also used to make it look nicer
        zIndex: 0, // Ensure border has z-index of 0
    },
});

export default Input;

这是我的设备（三星 Galaxy S10+）上的样子：

【讨论】：