Reactjs 如何使用react native设计字段集图例

在HTML中，我们可以使用如下字段集图例：

代码：

标题

O/p:

---

如何使用react native设计相同的东西？我有一种技术，它用一条直线创建文本，但我想把它设计成fieldset legend。我该怎么做？

我有一种技术，可以在没有任何库/包的情况下创建此字段集图例。以下是我的JSX代码：

JSX视图：

<View style={styles.fieldSet}>
    <Text style={styles.legend}>Heading</Text>
    <Text>Some Text or control</Text>
</View>

---

你可以做一个现成的包装-

使用它很容易

你可以直接做-

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

//...
  return (
    <View>
      <FieldSet label="Fieldset label">
        <Text>Field Set Body</Text>
      </FieldSet>
    </View>
  );
//...

从“react native FieldSet”导入字段集；
从“react native”导入{View，Text}；
//...
返回(
字段集主体
);
//...

它的代码行太多，以更简单、更快的方式提供。我认为，为应用程序引入一个库就更过分了，这可以通过创建这样的组件来解决，毕竟React是关于组件的。

const styles = StyleSheet.create({
    fieldSet:{
        margin: 10,
        paddingHorizontal: 10,
        paddingBottom: 10,
        borderRadius: 5,
        borderWidth: 1,
        alignItems: 'center',
        borderColor: '#000'
    },
    legend:{
        position: 'absolute',
        top: -10,
        left: 10,
        fontWeight: 'bold',
        backgroundColor: '#FFFFFF'
    }
});

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

//...
  return (
    <View>
      <FieldSet label="Fieldset label">
        <Text>Field Set Body</Text>
      </FieldSet>
    </View>
  );
//...