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',

Answer 2

我是这样的：

<强> BackgroundImageStyle.js

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
  container: {
      flex: 1,
      position: 'absolute',
      top: 0,
      left: 0,
      bottom: 0,
      right: 0
  }, 
  image: {
    flex: 1,
    resizeMode: 'cover',
  }
})

<强> BacgroundImage.js

import React, { Component } from 'react'
import { View, Image } from 'react-native'
import styles from './BackgroundImageStyle'

export default class BackgroundImage extends Component {
  render() {
    return (
      <View style={styles.container} >
        <Image
          style={styles.image}
          source={this.props.source}
        />
      </View>
    )
  }
}

然后你可以像

一样使用它

<BackgroundImage source={your_image}/>

我希望一切都清楚，诀窍是将位置设置为绝对，然后将顶部，左侧，底部和右侧设置为0

Answer 3

您可以使用react-native的ImageBackground组件

https://facebook.github.io/react-native/docs/imagebackground

return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);

React Native - 使图像适合屏幕

3 个答案: