如何使用 react-native 设计字段集图例答案

【问题标题】：How to design fieldset legend using react-native如何使用 react-native 设计字段集图例
【发布时间】：2019-10-14 17:33:23
【问题描述】：

在 HTML 中，我们可以像这样使用 fieldset-legend：

代码：

 <fieldset>
  <legend>Heading</legend>
 </fieldset>

O/P：

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

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

我获得了一种无需任何库/包即可创建此字段集图例的技术。这是我的 JSX 代码：

JSX 视图：

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

JSX 风格：

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'
    }
});

【讨论】：

代码行数太多，react-native-fieldset 提供了更简单快捷的方式
我认为仅仅为此向应用程序引入库更为过分，可以通过创建这样的组件来解决，毕竟 React 都是关于组件的。

【解决方案2】：

你可以用现成的包 - react-native-fieldset

使用它非常容易。

你可以直接做-

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>
  );
//...

【讨论】：