javascript - 在本机反应中在边框上输入文本标签

Question

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

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

我的代码是：

<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，当我添加透明背景颜色时，它看起来像这样：

标签： javascriptreact-nativereact-hooks

Answer 1

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