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

Posted 2023-02-16

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

【英文标题】：I am trying to add images in here but the moment I use this.props.imageUri. I get a blank image.. Couldn't find a solution

【发布时间】：2021-12-22 08:45:51

【问题描述】：

我正在尝试将图像添加到我的应用程序主页，但似乎每当我使用 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",
  ,
);

【问题讨论】：

使用require()获取"../home/nicosia.png"会返回什么？看起来图像源可能需要是格式化为字符串的路径，我不确定require() 是否会返回它。您甚至可能会发现完全删除 require() 会更好。

感谢您的回复.. 但是我怎样才能一起删除 require .. 如果我将它们全部删除，我将只有 imageUri=("../home/nicosia.png")这给了我一个错误..当我使用 require("../home/nicosia.png") 它只是给了我一个空白图像.. 我该怎么办？

【参考方案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>

【讨论】：

成功了！！！非常感谢