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

Question

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

代码：

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

输出/输出：

如何使用 react-native 设计相同的东西？在这里，我得到了一种用直线创建文本的技术，但我想像 fieldset-legend 一样设计它。我怎样才能做到这一点？

标签： reactjsreact-native

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