底部边框半径未显示在 React Native 视图中
Bottom borderRadius not showing in React Native view
我目前是第一次尝试 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 运行 中的一张图片:
这是在似乎正确加载的浏览器中加载时的结果:
希望有人对此有解决方案。
谢谢,汤姆
VerticalScrollItem 的样式很完美,也许flatlist 的样式有问题。检查FlatList的样式。
你好,希望对你有用
container: {
borderRadius:7,
overflow: "hidden",
width: 200,
marginRight: 10,
},
background: {
padding: 10,
borderRadius:7,
height: 300,
},
尝试使用以下解决方案,
1).将 borderRadius 赋予 ImageBackground 的 imageStyle 道具而不是样式。
2).取视图而不是ImageBackground,并将具有绝对位置的图像与ImageBackground的全高和全宽放在一起,并在此处申请使用imageStyle
我目前是第一次尝试 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 运行 中的一张图片:
这是在似乎正确加载的浏览器中加载时的结果:
希望有人对此有解决方案。
谢谢,汤姆
VerticalScrollItem 的样式很完美,也许flatlist 的样式有问题。检查FlatList的样式。
你好,希望对你有用
container: {
borderRadius:7,
overflow: "hidden",
width: 200,
marginRight: 10,
},
background: {
padding: 10,
borderRadius:7,
height: 300,
},
尝试使用以下解决方案, 1).将 borderRadius 赋予 ImageBackground 的 imageStyle 道具而不是样式。 2).取视图而不是ImageBackground,并将具有绝对位置的图像与ImageBackground的全高和全宽放在一起,并在此处申请使用imageStyle