底部边框半径未显示在 React Native 视图中

Question

我目前是第一次尝试 React Native，想做一个快速的 restau运行t 评论应用来尝试一下。

目前我遇到的问题是我的餐厅运行t 卡没有显示底部边框半径，而我确实使用了“隐藏”的溢出。

卡号

import { StyleSheet, Text, View, ImageBackground } from "react-native";
import React from "react";
import img from "../../assets/img.jpg";

const VerticalScrollItem = (props) => {
  const { name, description, rating } = props.props;
  return (
    <View style={styles.container}>
      <ImageBackground
        source={img}
        resizeMode="cover"
        style={styles.background}
      >
        <View style={styles.titlebox}>
          <Text style={styles.title}>{name}</Text>
        </View>
      </ImageBackground>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderBottomLeftRadius: 7,
    borderBottomRightRadius: 7,
    borderTopLeftRadius: 7,
    borderTopRightRadius: 7,
    overflow: "hidden",
    width: 200,
    height: 300,
    marginRight: 10,
  },
  background: {
    height: "100%",
    padding: 10,
    borderBottomLeftRadius: 7,
    borderBottomRightRadius: 7,
    borderTopLeftRadius: 7,
    borderTopRightRadius: 7,
  },
  titlebox: {
    width: "100%",
    padding: 5,
    backgroundColor: "white",
    opacity: 0.9,
    borderRadius: 2,
  },
  title: {
    fontWeight: "600",
    opacity: 1,
  },
});

export default VerticalScrollItem;

父组件代码：

import { StyleSheet, Text, View, ScrollView, Button } from "react-native";
import React, { useEffect, useState } from "react";
import VerticalScrollItem from "./VerticalScrollItem";

// Firebase imports
import { db } from "../../firebase/firebase-config";
import { getDocs, collection, doc } from "firebase/firestore";

const VerticalScrollItems = (props) => {
  const [data, setData] = useState([]);
  const searchRef = props.variant.toLowerCase();

  //Get data from Firebase

  useEffect(() => {
    const getData = async () => {
      //Reference to the collection depending on what row the components is coupled, (see props.collection for the desired col)
      const dataRef = collection(db, searchRef);
      try {
        const newData = await getDocs(dataRef);
        newData.forEach((doc) => {
          const response = doc.data();
          setData((prevState) => [...prevState, response]);
        });
      } catch (err) {
        console.error(err);
      }
    };
    getData();
  }, []);

  return (
    <View style={styles.container}>
      <View
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          flexDirection: "row",
        }}
      >
        <Text style={styles.title}>{props.variant}</Text>
        <Text style={styles.link}>Show more</Text>
      </View>
      <ScrollView
        style={styles.sv}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
      >
        {/* If there is not data in the array return loading, has to be replaced for a spinner */}
        {data.length ? (
          data.map((item, i) => <VerticalScrollItem key={i} props={item} />)
        ) : (
          <Text>Loading...</Text>
        )}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  sv: {
    flexDirection: "row",
    flex: 1,
  },
  title: {
    fontSize: 24,
    marginVertical: 5,
    fontWeight: "600",
    color: "#2f3840",
  },
  link: {
    color: "#e6933c",
    textDecorationLine: "underline",
  },
});

export default VerticalScrollItems;

这是我 phone 上 Expo 运行中的一张图片：

这是在似乎正确加载的浏览器中加载时的结果：

希望有人对此有解决方案。

谢谢，汤姆

Answer 1

VerticalScrollItem 的样式很完美，也许flatlist 的样式有问题。检查FlatList的样式。

Answer 2

你好，希望对你有用

 container: {
  borderRadius:7,
  overflow: "hidden",
  width: 200,
  marginRight: 10,
 },

background: {
  padding: 10,
  borderRadius:7,
  height: 300,
},

Answer 3

尝试使用以下解决方案， 1).将 borderRadius 赋予 ImageBackground 的 imageStyle 道具而不是样式。 2).取视图而不是ImageBackground，并将具有绝对位置的图像与ImageBackground的全高和全宽放在一起，并在此处申请使用imageStyle

底部边框半径未显示在 React Native 视图中

Bottom borderRadius not showing in React Native view

css

reactjs

react-native

overflow

border-radius