图像在 iOS 模拟器中显示正常，但是当我打开 android 模拟器时.. 一切都搞混了.. 我应该怎么做才能解决这个问题？

Question

图像在 iOS 模拟器中显示正常，但是当我打开 android 模拟器时.. 一切都搞混了.. 我应该怎么做才能解决这个问题？老实说，我不知道如何解决这个问题。所以请如果有人可以解决这个问题.. 将不胜感激。

So this is the Android emulator. I don't know why the image is like this.

this is on iOS simulator, and how it must be.

Home.js

import React from "react";
import {
  View,
  Text,
  Button,
  SafeAreaView,
  TextInput,
  StatusBar,
  Platform,
  ScrollView,
  Image,
  imageUri,
  StyleSheet,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import ProductsList from "../../components/productsList/ProductsList";
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
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={16}
        >
          <View style={{ height: 180, width: 50 }}>
            <Image source={require("../home/homepage.jpeg")} />
          </View>
        </ScrollView>
        <ScrollView scrollEventThrottle={16}>
          <View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}>
            <Text
              style={{
                alignItems: "center",
                fontSize: 24,
                fontWeight: "700",
                paddingHorizontal: 20,
                marginLeft: 100,
                borderColor: "grey",
                height: 50,
                width: 230,
                shadowOpacity: 0.5,
                borderWidth: 0.5,
                paddingTop: 10,
                backgroundColor: "lightblue",
              }}
            >
              FIND YOUR RIDE
            </Text>
            <View style={{ height: 130, marginTop: 20 }}>
              <ScrollView
                horizontal={true}
                showsHorizontalScrollIndicator={false}
              >
                <Location
                  imageUri={require("../home/nicosia.jpg")}
                  name="Nicosia"
                />

                <Location
                  imageUri={require("../home/kyrenia.jpg")}
                  name="Kyrenia"
                />

                <Location
                  imageUri={require("../home/famagusta.jpg")}
                  name="Famagusta"
                />

                <Location
                  imageUri={require("../home/lefke.png")}
                  name="Lefke"
                />
              </ScrollView>
            </View>
            <View style={{ marginTop: 40, paddingHorizontal: 20 }}>
              <View>
                <Text
                  style={{
                    fontSize: 24,
                    fontWeight: "700",
                    paddingLeft: 40,
                  }}
                >
                  <View>
                    <MaterialCommunityIcons
                      name="face-agent"
                      size={30}
                      style={{ paddingLeft: 10, color: "lightblue" }}
                    />
                  </View>
                  24/7 customer support
                </Text>
                <Text
                  style={{ paddingLeft: 80, marginTop: 20, marginBottom: 25 }}
                >
                  {
                    "Rest easy knowing that everyone in \nthe Rent in cars community is screened, \nand 24/7 customer support and \nroadside assistant are just a tap away."
                  }
                </Text>
              </View>

              <View>
                <Text
                  style={{
                    fontSize: 24,
                    fontWeight: "700",
                    paddingLeft: 40,
                  }}
                >
                  <View>
                    <MaterialCommunityIcons
                      name="car"
                      size={30}
                      style={{
                        paddingLeft: 10,
                        color: "lightblue",
                        marginTop: 20,
                      }}
                    />
                  </View>
                  Endless options
                </Text>
                <Text
                  style={{ paddingLeft: 80, marginTop: 20, marginBottom: 25 }}
                >
                  {
                    "Choose from hundreds of models\nyou won't find anywhere else. Pick it \nup or get it delivered where you \nwant it."
                  }
                </Text>
              </View>

              <View>
                <Text
                  style={{
                    fontSize: 24,
                    fontWeight: "700",
                    paddingLeft: 40,
                  }}
                >
                  <View>
                    <MaterialCommunityIcons
                      name="security"
                      size={30}
                      style={{ paddingLeft: 10, color: "lightblue" }}
                    />
                  </View>
                  Drive confidently
                </Text>
                <Text style={{ paddingLeft: 80, marginTop: 20 }}>
                  {
                    "Drive confidently with your choice \nof protection plans - all plans \ninclude varying levels of third party \nliability insurance from Liberty \nMutual and physical damage \nprotection from Rent in Car that caps\nyour out of pocket responsibility for \ndamage to your host's car during \nyour trip."
                  }
                </Text>
              </View>
            </View>
          </View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
    },
    red: {
      color: "red",
    },
  });
}

Answer 1

定义宽高和resizeMode：

<View style={{width:"100%", height:180}}>
    <Image
        style={{
        width: "100%",
        height: 180
        }}
        resizeMode="cover"
        source={require("../home/homepage.jpeg")}
    />
/>