Question

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

我已经尝试了很多使用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",
  }

})

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

Answer 1

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

我需要一张图像以占用其最大空间，而不管其原始大小如何

1 个答案: