时间戳

首页 > 解决方案 > 我需要一张图片来占用它可以占用的最大空间，无论其原始大小如何

css - 我需要一张图片来占用它可以占用的最大空间，无论其原始大小如何

问题描述

我正在开发一个 react-native 应用程序，我有一个顶栏和一个底栏。在这两个条之间有一个图像，我需要它占用它可以占用的最大空间，而不管图像的原始大小如何，而不会妨碍两个条。我已经尝试了一段时间，但我无法弄清楚如何做到这一点。

我用 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",
  }

})

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

标签： cssreact-nativeflexbox

解决方案

我不太确定你想要得到什么。您可以尝试使用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>

推荐阅读