React Native：borderBottom 不显示在空视图中

Posted 2023-03-15

【中文标题】React Native：borderBottom 不显示在空视图中

【英文标题】：React Native: borderBottom does not show up in empty View

【发布时间】：2020-06-05 06:41:04

【问题描述】：

在我的 React Native 应用程序中，我尝试创建一个简单的分隔线。如here 所述，例如，我创建了一个空视图并为其添加了相应的样式。

事情是这样的：分隔线没有显示在这段代码中：

    <View style=styles.divider>
      <Text></Text>
    </View>

... Stylesheet:

  divider: 
    borderBottomWidth: 1,
    borderLeftColor: 'white',
  ,

但是如果我添加一些文本行，它就会显示出来：

    <View style=styles.divider>
      <Text>testtest</Text>
    </View>

... Stylesheet:

  divider: 
    borderBottomWidth: 1,
    borderLeftColor: 'white',
  ,

现在这里是代码上下文。

   <View style=styles.containerWholePage>
      <View style=styles.containerUpper>
        <Text style=styles.mainText>Here is a sample text</Text>
      </View>

      <View style=styles.containerLower>
        <View style=styles.containerText>
          <Text>TEST</Text>
          <Text>Example 3</Text>
          <Text>18:00 - 20:00</Text>
        </View>
        <View style=styles.divider>
          <Text>testtest</Text>
        </View>
        <View style=styles.containerText>
          <Text>TEST2</Text>
          <Text>Example 3b</Text>
          <Text>18:00 - 19:00</Text>
        </View>
      </View>
    </View>

...

const styles = StyleSheet.create(
  containerWholePage: 
    alignItems: 'center',
    flex: 1,
  ,
  divider: 
    borderBottomWidth: 1,
    borderBottomColor: 'white',
  ,
  containerLower: 
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: '#1E2928',
    flex: 6,
    justifyContent: 'space-around',
  ,
  containerText: 
    alignItems: 'center',
    backgroundColor: '#1E2928',
  ,
  containerUpper: 
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: 'white',
    flex: 3,
  ,
);

也许您知道如何在不写文本的情况下显示底线？

【问题讨论】：

使用类名分隔符将height 添加到您的view

@arnavpanwar99 不起作用>.

【参考方案1】：

就这样做吧：

<View style=styles.divider/>
...
divider: 
    borderBottomWidth: 1,
    borderBottomColor: 'white',
    width:"100%"
,

因为宽度对它的内容是灵活的，所以如果里面什么都没有，它就没有宽度。这样，如果您设置宽度，View 将具有您想要的宽度设置。

Code sandbox

【参考方案2】：

基本上应该可以，我只是在沙箱中对其进行了测试并添加了一个

<View style=borderBottomWidth: 1 >
<Text></Text>
</View>

对我来说很完美。也许可以在 Text 标签之间添加一个 " "。

【讨论】：

即使我在文本标签之间添加 " " 似乎也不起作用...它在沙箱上显示了一条非常短的线...codesandbox.io/s/white-sun-4w4yp

是的，这是因为如果你摆脱了 alignItems: "center" from containerLower 样式的容器设置方式，它可以工作

我明白了，因为我首先想到的是通过他的代码更改它希望让他快速实现。大声笑

是的，我只是在一个空的沙箱中尝试了它，这就是它对我有用的原因：D

【参考方案3】：

你也可以试试：

    <View style=styles.divider/>

    divider: 
    borderBottomWidth: 1,
    borderBottomColor: 'white',
    alignSelf:"stretch"
    ,   

但我更喜欢只使用宽度：“100%”