Question

我正在尝试创建一个贴合我设备屏幕顶部的图像。基本上是标题图像。最后我已经能够将图像缩放到屏幕的宽度，但是现在我已经拥有它，它总是给自己一个额外的顶部边缘，我似乎无法绕过它。我玩过flex属性，但似乎没什么用！我想知道是否有人曾经遇到过这样的问题。我对CSS有点新意，如果我的问题愚蠢，请原谅我。

以下是显示的内容（边距远高于25像素）： https://imgur.com/a/9Mzql

我的代码如下（为大家简化）：

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

export class Home extends Component {
  static NavOption = {
    title: 'Home',
  };
  render() { 
    return (
      <View>
        <View style={{flex: 1, justifyContent: 'flex-start'}}>
          <Image 
              source={require('./pictures/my-image.png')}
              style={styles.headerImage}
              resizeMode='contain'
            />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  headerImage: { 
    maxWidth: '100%',
  },
});

Answer 1

resizeMode='contain'实际上根据图像的大小调整来居中和填充图像。您必须动态计算和设置高度。

以下是如何做到这一点的一个很好的例子：
Image Alignment when using resizeMode = contain

Answer 2

戈登，不是一个愚蠢的问题。我有完全相同的问题。我做了ReyHaynes的建议（谢谢！），但在我的情况下，修改了他为我的情况链接的例子：

original example

该示例要求静态maxWidth / maxHeight返回图像的一组尺寸。既然我不知道那些变量需要什么，这就是我如何修改他的例子以适应我的情况：

import { Dimensions } from 'react-native';

然后，改变这个......

var maxWidth = 110;
var maxHeight = 30;

为...

  var maxWidth = Dimensions.get('window').width;
  var maxHeight = height;

最后，按照他的建议，按照原始示例并实施。

反应原生的时髦图像定位？

2 个答案: