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

Posted 2023-03-15

【中文标题】如何使用 react-native 设计字段集图例

【英文标题】：How to design fieldset legend using react-native

【发布时间】：2019-10-14 17:33:23

【问题描述】：

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

代码：

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

O/P：

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

【参考方案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>
  );
//...