BorderBottom 在视图顶部添加了 React Native答案

【问题标题】：BorderBottom added top of the view React NativeBorderBottom 在视图顶部添加了 React Native
【发布时间】：2021-01-05 09:44:36
【问题描述】：

我想在<View>（如<hr>）的底部添加一个边框，因此我将该代码添加到我的样式中：

export default function Chat() {
  return (
    <View>
      <View style={styles.inner}>
        <CircleCard />
        <CircleCard />
        <CircleCard />
        <CircleCard />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  inner: {
    width: "100%",
    height: "85%",
    flexDirection: "row",
    flexWrap: "wrap",
    flex: 1,
    borderBottomColor: "black",
    borderBottomWidth: 1,
  },
});

但此代码将边框绘制到顶部而不是底部。

还有 CircleCard 组件：

export default function CircleCard() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.imageStyle}
        source={require("../assets/games/Among-us.png")}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { width: 60, height: 60, margin: 5, marginTop: 10 },
  imageStyle: {
    width: "100%",
    height: "100%",
    overflow: "hidden",
    resizeMode: "stretch",
    borderRadius: 140,
  },
});

我该如何解决？

注意：我在 styles.inner 中添加了一个负的 marginTop，但是当我添加一个新组件时，所有页面都损坏了。

这是我想做的：

【问题讨论】：

你能发布你想要实现的 ui 图像吗：这个有用吗？ snack.expo.io/@xeteke8423/blessed-blueberries
我有一个 topnavtab。这会破坏风格吗？我从android 9添加了一个ui到主页。仍然存在同样的问题，黑色边框出现在顶部而不是底部@KetanRamteke
您的borderBottomColor 设置为白色（目标不是黑色）。顶部的边框可能与 topnav 相关
抱歉，我没有添加更改。我将颜色从白色更改为黑色。我正在将该信息添加到主页。
@KetanRamteke。你疯了：）。谢谢我解决了我的问题。我想知道您是否从我的图像中编写了整个代码？

标签： javascript css reactjs react-native

【解决方案1】：

工作应用程序：Expo Snack

import * as React from 'react';
import { View, StyleSheet, Image } from 'react-native';

export default function Chat() {
  return (
    <View>
      <View style={styles.inner}>
        <CircleCard />
        <CircleCard />
        <CircleCard />
        <CircleCard />
      </View>
    </View>
  );
}

function CircleCard() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.imageStyle}
        source={{
          uri:
            'https://www.graphicpie.com/wp-content/uploads/2020/11/red-among-us-png-1684x2048.png',
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 60,
    height: 60,
    margin: 5,
    marginTop: 10,
    justifyContent: 'center',
    backgroundColor: 'white',
    borderRadius: 30,
  },
  imageStyle: {
    width: '100%',
    height: '100%',
    overflow: 'hidden',
    resizeMode: 'stretch',
    borderRadius: 140,
  },
  inner: {
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
    /**
     * i guess "rgba(21,21,21,0.2)" looks better than then plain "black"
     * borderBottomColor: "rgba(21,21,21,0.2)",
     */
    borderBottomColor: 'black',
    borderBottomWidth: 1,
  },
});

【讨论】：