Css 我需要一个图像，以采取最大的空间，它可以不考虑其原始大小

我正在开发一个react本机应用程序，我有一个顶栏和一个底栏。在这两个条之间有一个图像，我需要它占据最大的空间，不管图像的原始大小如何，而不妨碍这两个条。我已经试了一段时间，但我不知道怎么做

我用flexbox做了很多尝试，并设置了图像大小，但都没能成功

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import Topbar from './topbar.js'

export default function App() {
  return (
    <View style = {{
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'space-between'
    }}>
    <View>
      <Topbar />
    </View>
    <View>
      <Image source={require('./image2.jpg')} />
    </View>
    <View>
      <Topbar />
    </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

// here are my bars

import React, { Component } from "react";
import {
  Image, StyleSheet, View, Text,Dimensions
} from "react-native";
import Animated from "react-native-reanimated";


const {screenwidth, screenheight } = Dimensions.get("window");

export default class Topbar extends Component {
render() {
  return (
    <View style ={{
      width: screenwidth,
      height: 80,
      backgroundColor: "#C0C0C0",
      flexDirection: 'row',
      justifyContent: 'space-between',
    }}>
    </View>
  )
}
}

const styles = StyleSheet.create({
  topbarbackground: {
    width: screenwidth,
    height: 80,
    backgroundColor: "#C0C0C0",
  }

})

从“React”导入React；
从“react native”导入{样式表、文本、视图、图像}；
从“./Topbar.js”导入Topbar
导出默认函数App（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});
//这是我的酒吧
从“React”导入React，{Component}；
进口{
图像、样式表、视图、文本、尺寸
}从“反应本族语”；
从“react native reanimated”导入动画；
const{screenwidth，screenheight}=Dimensions.get（“窗口”）；
导出默认类Topbar扩展组件{
render（）{
返回(
)
}
}
const styles=StyleSheet.create({
topbarbackground：{
宽度：屏幕宽度，
身高：80，
背景颜色：“c0”，
}
})

---

我需要看到条形图和图像，它必须占据整个手机屏幕。

我不太确定你想得到什么。您可以尝试使用

ImageBackground

组件，并将

resizeMode

设置为

cover

。例如：

覆盖整个屏幕

<ImageBackground 
    source={img}
    imageStyle={{ resizeMode: 'cover' }}
    style={{ width: '100%', height: '100%' }}>
  <Topbar/>
  <View style={{ flex: 1 }}/>
  <Bottombar/>
</ImageBackground>

覆盖可用空间

<View style={{ flex: 1 }}>
  <Topbar/>
  <ImageBackground 
    source={img}
    imageStyle={{ resizeMode: 'cover' }}
    style={{ width: '100%', flex: 1 }}/>
  <Bottombar/>
</View>

您当前的

似乎没有任何进展。考虑设置你的图像作为背景，使用<代码> <代码>。请为其高度和宽度设置一个值。您也可以考虑添加一些顶部和底部填充您的酒吧。尝试感谢您的帮助！我用的是大屏幕手机。如果它被屏幕更小的手机使用，我该如何适应呢？对不起，世博会出了点问题。谢谢我现在就试试。当然，很乐意帮忙！