时间戳

首页 > 解决方案 > 如何在 React Native 中创建一条将 View 分成两个相等边的水平线？

react-native - 如何在 React Native 中创建一条将 View 分成两个相等边的水平线？

问题描述

我正在做一个小型 RN 项目，遇到需要在 View 元素的中间制作一条水平线。我想创建一个水平分成两等分的 View 元素。我知道在 CSS 中使用 ::before 和 ::after 标签在 HTML && CSS 中是可行的，但是在 RN 中这是如何完成的？

谢谢

标签： react-native

解决方案

您可以使用flexbox（https://reactnative.dev/docs/flexbox）：

<View style={{flex: 1}}>
      <View
        style={{
          flex: 0.5,
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
      />
</View>

flex此示例中的外部视图通过设置为占据整个高度1。如果您在该外部视图内创建一个大小为外部视图一半的视图并将其 aborderBottomWidth设为 1，则您将在外部视图的中间创建一条水平线。

根据您希望外部视图的大小，您可以对这些flex值进行试验。

推荐阅读