image - React Native - 使图像适合屏幕

Question

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

我尝试了许多在类似问题中找到的解决方案，使用 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',