我正在尝试在此处添加图像，但是当我使用this.props.imageUri时。我得到一个空白图像..找不到解决方案

Question

我正试图将图像添加到我的应用程序主页，但似乎每当我使用this.props.imageUri时，它都不再显示图像。我试着用图像源来做。。它是有效的，但当我创建Location.js并添加this.props.imageUrl时，图像不再显示。。所以我不知道该怎么办。

这是我的Home.js文件

import React from "react";
import {
View,
Text,
Button,
SafeAreaView,
TextInput,
StatusBar,
Platform,
ScrollView,
Image,
imageUri,
StyleSheet,
} from "react-native";
import ProductsList from "../../components/productsList/ProductsList";
import { styles } from "../../styles/authStyle";
import Icon from "react-native-vector-icons/Ionicons";
import { fontSize } from "styled-system";
import Location from "../components/Location";
export default function Search({ navigation }) {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<View
style={{
height: 80,
backgroundColor: "white",
borderBottomWidth: 1,
borderBottomColor: "#dddddd",
}}
>
<View
style={{
flexDirection: "row",
padding: 10,
backgroundColor: "white",
marginHorizontal: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: "black",
shadowOpacity: 0.2,
borderRadius: 50,
elevation: 1,
}}
>
<Icon name="ios-search" size={20} style={{ marginRight: 10 }} />
<TextInput
underlineColorAndroid="transparent"
placeholder="City, airport, adrerss, or hotel"
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: "700", backgroundColor: "white" }}
/>
</View>
</View>
<ScrollView scrollEventThrottle={16}>
<View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingHorizontal: 20,
marginLeft: 100,
}}
>
FIND YOUR RIDE
</Text>
<View style={{ height: 130, marginTop: 20 }}>
<ScrollView>
<Location
imageUri={require("../home/nicosia.png")}
name="nicosia"
/>
</ScrollView>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
}

这是Location.js

import React, { Component } from "react";
import { View, Text, StyleSheet, Image, imageUri } from "react-native";
class Location extends Component {
render() {
return (
<View
style={{
alignItems: "center",
height: 130,
width: 130,
marginLeft: 20,
borderWidth: 0.5,
borderColor: "#dddddd",
}}
>
<View style={{ flex: 2 }}>
<Image
source={this.props.imageUri}
style={{
flex: 1,
width: null,
height: null,
resizeMode: "cover",
}}
/>
</View>
<View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
<Text>{this.props.name}</Text>
</View>
</View>
);
}
}
export default Location;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});

Answer 1

将宽度和高度设置为固定大小或忽略它们。

<View style={{ flex: 2 }}>
<Image
source={this.props.imageUri}
style={{
flex: 1,
{/* Don't set width and height to null */}
width: null,
height: null,
resizeMode: "cover",
}}
/>
</View>
<View style={{ flex: 1, paddingLeft: 3, paddingTop: 10 }}>
<Text>{this.props.name}</Text>
</View>