React backgroundImage 不为 phone 显示,但为 web 显示
React backgroundImage doesn't display for phone but displays for web
我将 backgroundImage 设置为 url,它在网络视图中正确显示,但是当我尝试在我的 Android phone 上查看它时(因为它本来是一个应用程序),backgroundImage 不知何故不显示?它只是显示一个白色的屏幕。我不确定为什么只有在 phone 上查看时才会发生这种情况。我已经尝试下载图像并使用 require 从我的源文件夹访问它,但它仍然只显示在网络视图中,而不显示在我的 phone 中。我正在使用 expo.dev 查看我的 phone。我正在使用道具为 backgroundImage 分配图像数据。
const data = [
{ title: "Joe's Gelato",
tagline: "Dessert, Ice cream, £££",
eta: "10-30",
imgUri: ("https://images.unsplash.com/photo-1572307230741-453859592dce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=800")
}
];
function HomeScreen({ navigation }) {
const HomescreenCell = (props) => (
<Cell
{...props}
onPress={() => navigation.navigate('Menu')}
cellContentView={
<View style={{ flex: 1, backgroundImage: `url("${props.imgUri}")`, backgroundSize: "cover" }}>
<View>
<Text style={{
fontWeight: "bold",
fontFamily: "Trebuchet MS",
color: "#FFC613"
}}>
{props.title}
</Text>
<Text style={{
fontFamily: "Noto Sans",
color: "#FFF2D8"
}}>
{props.tagline}
</Text>
</View>
</View>
}
/>
)
return (
<ScrollView>
{
<View>
<TableView>
<Section header="HomeScreen" hideSeparator="true" separatorTintColor="#ccc">
{data.map((item, index) =>
<HomescreenCell key = {item.title}
title= {item.title}
tagline= {item.tagline}
eta= {item.eta}
imgUri= {item.imgUri}
/>
)}
</Section>
</TableView>
</View>
}
</ScrollView>
);
}
我认为 backgroundImage
View Style Prop 在 react-native 上受支持。至少我在这个 doc 中找不到它。
尝试使用 ImageBackground 而不是
我将 backgroundImage 设置为 url,它在网络视图中正确显示,但是当我尝试在我的 Android phone 上查看它时(因为它本来是一个应用程序),backgroundImage 不知何故不显示?它只是显示一个白色的屏幕。我不确定为什么只有在 phone 上查看时才会发生这种情况。我已经尝试下载图像并使用 require 从我的源文件夹访问它,但它仍然只显示在网络视图中,而不显示在我的 phone 中。我正在使用 expo.dev 查看我的 phone。我正在使用道具为 backgroundImage 分配图像数据。
const data = [
{ title: "Joe's Gelato",
tagline: "Dessert, Ice cream, £££",
eta: "10-30",
imgUri: ("https://images.unsplash.com/photo-1572307230741-453859592dce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=800")
}
];
function HomeScreen({ navigation }) {
const HomescreenCell = (props) => (
<Cell
{...props}
onPress={() => navigation.navigate('Menu')}
cellContentView={
<View style={{ flex: 1, backgroundImage: `url("${props.imgUri}")`, backgroundSize: "cover" }}>
<View>
<Text style={{
fontWeight: "bold",
fontFamily: "Trebuchet MS",
color: "#FFC613"
}}>
{props.title}
</Text>
<Text style={{
fontFamily: "Noto Sans",
color: "#FFF2D8"
}}>
{props.tagline}
</Text>
</View>
</View>
}
/>
)
return (
<ScrollView>
{
<View>
<TableView>
<Section header="HomeScreen" hideSeparator="true" separatorTintColor="#ccc">
{data.map((item, index) =>
<HomescreenCell key = {item.title}
title= {item.title}
tagline= {item.tagline}
eta= {item.eta}
imgUri= {item.imgUri}
/>
)}
</Section>
</TableView>
</View>
}
</ScrollView>
);
}
我认为 backgroundImage
View Style Prop 在 react-native 上受支持。至少我在这个 doc 中找不到它。
尝试使用 ImageBackground 而不是