首页 文章

React Native - 使图像适合屏幕

提问于
浏览 次
2

我只想在电话屏幕上放置任意大小的图像，因此它只是作为背景保留在那里 . 我有一个与我试图放入页脚的徽标相同的问题，我无法让它适合它的视图容器 .

我尝试了很多类似问题的解决方案，使用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 
  }
}

提前致谢！

编辑：

Original picture

This is what the app is looking like

image react-native

2 回答

  • 0

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

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

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

    resizeMode: 'stretch',
    回复于
  • 3

    我喜欢这样：

    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}/>

    我希望一切都清楚，诀窍是将位置设置为绝对，然后将top，left，bottom和right设置为0

    回复于

相关问题