使用 React Native 在 iphone x 上使图像适合全屏答案

【问题标题】：Make image fit fullscreen on iphone x with React Native使用 React Native 在 iphone x 上使图像适合全屏
【发布时间】：2018-07-03 20:28:43
【问题描述】：

正如标题所说，我希望我的图像适合我的 Iphone X 模拟器上的整个屏幕。我已经测试将 imageContainer 设置为“with: 100%”以及包含所有内容的容器，但它不起作用。对任何建议都很满意。

问题的图像： enter image description here

组件：

import React, { Component } from 'react'
import { View, Text, ImageBackground, Image } from 'react-native'
import { Avatar, Icon, Button, Tile } from 'react-native-elements'
import { Actions } from 'react-native-router-flux'

import styles from './ProfileInListModal.style'

class ProfileInListModal extends Component {

  render (user) {
    return (
      <View style={styles.container}>
        <View style={styles.Imagecontainer}>
          <Image
            style={{height: '100%'}}
            source={{uri: this.props.user.data.profile_picture}} />
        </View>

        <View style={styles.profileContent}>
          <Text style={styles.nameTextStyle}>{this.props.user.data.name} {this.props.user.data.age}</Text>
        </View>

        <View style={styles.locationContainer}>
          <Icon name='place' type='place' color='#FFF' size={15} />
          <Text style={styles.locationText}> {this.props.user.data.position} </Text>
        </View>

        <View style={styles.descriptionTextContainer}>
          <Text style={styles.descriptionTextStyle}> {this.props.user.data.descriptionText} </Text>
        </View>

        <View style={styles.socialIconContainer}>
          <Icon
            name='snapchat-ghost'
            type='font-awesome'
            color='white'
            onPress={() => console.log('hello')}
            iconStyle={styles.socialIcons}
            />

          <Icon
            name='facebook'
            type='font-awesome'
            color='white'
            onPress={() => console.log('hello')}
            iconStyle={styles.socialIcons}
            />

          <Icon
            name='instagram'
            type='font-awesome'
            color='white'
            onPress={() => console.log('hello')}
            iconStyle={styles.socialIcons}
            />
        </View>

        <View style={styles.buttonContainer}>
          <Button
            icon={<Icon name='message-plus' type='material-community' size={20} color='white' />}
            title='Send a message'
            titleStyle={{ fontFamily: 'GeosansLight' }}
            onPress={this.startchat.bind(this)}
            buttonStyle={styles.buttonStyle} />
        </View>
      </View>

    )
  }
}

export default ProfileInListModal

风格：

const styles = {
  container: {
    height: '100%',
    marginBottom: 38,
  },
  Imagecontainer: {
    height: 370
  },
  profileContent: {
    flexDirection: 'column',
    width: '35%',
    marginTop: 30
  },
  nameTextStyle: {
    color: 'white',
    fontSize: 25,
    fontFamily: 'GeosansLight'
  },
  locationContainer: {
    flexDirection: 'row',
    marginTop: 10
  },
  locationText: {
    color: 'white',
    fontSize: 15,
    fontFamily: 'GeosansLight'
  },
  descriptionTextContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 30
  },
  descriptionTextStyle: {
    color: 'white',
    fontSize: 20,
    fontFamily: 'GeosansLight',
    textAlign: 'center'
  },
  socialIconContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    marginBottom: 25
  },
  socialIcons: {
    padding: 8
  },
  buttonContainer: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  buttonStyle: {
    backgroundColor: '#D1AF46',
    width: 300,
    height: 45,
    borderColor: 'transparent',
    borderWidth: 0,
    borderRadius: 5
  }
}

export default styles

【问题讨论】：

你是怎么解决这个问题的？

标签： javascript css reactjs react-native

【解决方案1】：

https://facebook.github.io/react-native/docs/safeareaview.html

添加一个安全区域，如果你想使用 react-navigation，他们已经把它结块了。

【讨论】：

【解决方案2】：

我相信您正在寻找的是resizeMode style。即使您将图像样式设置为width: '100%', height: '100%'，也只有容器会采用这些比例。使用cover 或contain 的resizeMode 我相信你会得到你想要的结果。

【讨论】：