底部邊框半徑未在ReactNative視圖中顯示

我目前正在第一次嘗試 React Native，并想制作一個快速的餐廳評論應用程式來嘗試一下。

目前我的問題是我的餐廳卡沒有顯示底部邊框半徑，而我確實使用了“隱藏”溢位。

卡的代碼

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;

這是我手機上運行的 Expo 中的影像：

這是在加載到似乎正確加載的瀏覽器中時：

希望有人對此有解決方案。

謝謝，湯姆

uj5u.com熱心網友回復：

嗨，我希望它對你有用

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

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

uj5u.com熱心網友回復：

VerticalScrollItem 的樣式很完美，可能是 flatlist 的樣式有問題。檢查 FlatList 的樣式。

uj5u.com熱心網友回復：

嘗試使用以下解決方案，1）。將borderRadius 賦予ImageBackground 的imageStyle 屬性而不是樣式。2）。取視圖而不是 ImageBackground，并將具有絕對位置的影像與 ImageBackground 的全高和全寬放在此處并申請使用 imageStyle aslo

標籤：css 反应 反应式 溢出 边界半径

上一篇：引數型別“List<int>”不能分配給引數型別“Uint8List”

下一篇：reactnativehooks只能在函陣列件的主體內部呼叫