React Native - 使图像适合屏幕

Question

我只想将任何尺寸的图像适合手机屏幕，所以它只是作为背景留在那里。我在尝试将徽标放入页脚时遇到了同样的问题，我无法将其放入它的视图容器中。

我已经尝试了在类似问题中找到的许多解决方案，使用 resizeMode 和许多宽度/高度值，但似乎没有任何效果。我的图像总是以相同的方式显示。

图像组件的代码：

import React from 'react';
import { View, Image } from 'react-native'; 


const Workspace = (props) => {

return (
  <View 
  style = {styles.workspaceStyle}>
    <Image
    source={props.img}
    resizeMode = 'contain'/> 
    {props.children}
  </View>
 );
};
const styles = {
  workspaceStyle: {
    flex: 1
 }
}

export default Workspace;

我的 app.js 渲染和样式代码：

render() { 
    return (
        <View style = {{flex: 1}}>

          <Workspace 
            img={require('./images/quarto.png')}/>

          <ScrollView>
            <Header>
              <HeaderItem img={require('./images/camera.png')}/>
              <HeaderItem img={require('./images/camera.png')}/>
              <HeaderItem img={require('./images/camera.png')}/>
              <HeaderItem img={require('./images/camera.png')}/>
            </Header>
          </ScrollView>

          <ScrollView style = {{flexDirection: 'row'}}>
            {this.sideMenuShow()}
          </ScrollView>

          <Footer>
            <View style = {styles.logoContainerStyle}>
              <Image
                style = {styles.logoStyle}
                source = {require('./images/magicalStage.png')}
                resizeMethod = "scale"
                />
            </View>
            <Text style = {{color: 'white', marginTop: 5, marginBottom: 2}}>teste, teste, teste, teste</Text>
          </Footer>

        </View>
    );
  }
}

const styles = {
  logoContainerStyle: {
    marginRight: 5,
    marginLeft: 5,
    marginTop: 2,
    marginBottom: 3,
    width: "20%"
  },

  logoStyle: {
   paddingLeft: 2,
   paddingRight: 2 
  }
}

提前致谢！

编辑：

Answer 1

在app.js，你的外部view需要使用width and height屏幕：

width: Dimensions.get('window').width,
height: Dimensions.get('window').height

接下来，在Workspace：使用stretch而不是contain（与您的页脚相同，添加resizeMode）

resizeMode: 'stretch',