是否可以在本机的边框中写文本（如照片）？

Question

我在任何地方都找不到如何在边框中写文本的方法，如下面的照片所示

Answer 1

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

const styles = StyleSheet.create({
  container: {
    height: 65, 
    position: 'relative',
  },
  labelContainer: {
    position: 'absolute',
    backgroundColor: '#FFF',
    top: -8,
    left: 25,
    padding: 5,
    zIndex: 50,
  },
  textInput: {
    flex: 1, 
    borderWidth: 1, 
    borderColor: "steel",
    justifyContent: 'flex-end',
    height: 44,
    borderRadius: 65,
    paddingHorizontal: 25,
  }
})

const CustomTextInput = ({ label, style, ...props}) => (
  <View style={styles.container}>
    <View style={styles.labelContainer}>
      <Text>{label}</Text>
    </View>
    <TextInput style={styles.textInput}/>
  </View>
);

export default CustomTextInput;

用法：

import TextInput from './TextInput';

<TextInput label="User name" />

您可以根据需要调整样式。

这是它的外观：