React Native - 图像大于父级答案

【问题标题】：React Native - Image bigger than parentReact Native - 图像大于父级
【发布时间】：2020-11-04 13:12:35
【问题描述】：

就像在 tinder 中一样，我有一个带有 3 个图像选择器的屏幕。当我从图库中选择图像时，我希望它保留在 TouchableOpacity 容器中。但是，图像与容器重叠。

我一直在尝试here 提到的各种事情，但图像仍然重叠，如下图所示：

有什么问题？

/* eslint-disable react-native/no-inline-styles */
import React, { useState } from 'react'
import {
  Text,
  View,
  Image,
  Button,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
} from 'react-native'
import ImagePicker from 'react-native-image-crop-picker'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
import Colors from '../../../constants/Colors'
const { width: WIDTH } = Dimensions.get('window')

const ProfileEdit = () => {
  const [photo, setPhoto] = useState(null)

  const handleChoosePhoto = () => {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    }).then((image) => {
      setPhoto({
        uri: image.path,
        width: image.width,
        height: image.height,
        mime: image.mime,
      })
      console.log(image)
    })
  }

  return (
    <View style={styles.main}>
      <View style={styles.button_row}>
        <View style={styles.buttonWrapper}>
          <TouchableOpacity
            onPress={() => handleChoosePhoto()}
            style={styles.button}>
            {photo ? (
              <Image source={photo} style={styles.photo} />
            ) : (
              <FontAwesomeIcon
                icon={faPlusCircle}
                color={Colors.defaultColor}
                size={22}
                style={styles.icon}
              />
            )}
          </TouchableOpacity>
        </View>
        <View style={styles.buttonWrapper}>
          <TouchableOpacity
            onPress={() => handleChoosePhoto()}
            style={styles.button}>
            <FontAwesomeIcon
              icon={faPlusCircle}
              color={Colors.defaultColor}
              size={22}
              style={styles.icon}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.buttonWrapper}>
          <TouchableOpacity
            onPress={() => handleChoosePhoto()}
            style={styles.button}>
            <FontAwesomeIcon
              icon={faPlusCircle}
              color={Colors.defaultColor}
              size={22}
              style={styles.icon}
            />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
  },
  icon: {},
  button: {
    height: `${100}%`,
    backgroundColor: Colors.defaultWhite,
    padding: 2,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 3,
  },
  buttonWrapper: {
    width: WIDTH / 3,
    padding: 10,
  },
  button_row: {
    flex: 0.3,
    flexWrap: 'wrap',
    flexDirection: 'row',
  },
  photo: {
    width: WIDTH / 2,
    height: WIDTH / 2,
    // borderRadius: 3,
    resizeMode: 'contain',
  },
})

export default ProfileEdit

【问题讨论】：

标签： react-native

【解决方案1】：

正确答案如here所述

“但是由于图片会尝试根据图片的实际大小设置宽度和高度，您需要覆盖这些样式属性”

<Image
  style={{
    flex: 1,
    alignSelf: 'stretch',
    width: undefined,
    height: undefined
  }}
  source={require('../../assets/images/onboarding-how-it-works.png')}
/>

【讨论】：

【解决方案2】：

试试这个而不是计算图像宽度：

<TouchableOpacity
  onPress={() => handleChoosePhoto()}
  style={styles.button}>
  {photo ? (
    <View style={styles.photoContainer}>
        <Image source={photo} style={styles.photo} />
    </View>
  ) : (
    <FontAwesomeIcon
      icon={faPlusCircle}
      color={Colors.defaultColor}
      size={22}
      style={styles.icon}
    />
  )}
</TouchableOpacity>

const styles = StyleSheet.create({
    photoContainer: {
        // flex: 1 
    },
    photo: {
        height: WIDTH / 2,
        width: '100%',
        resizeMode: 'contain'
    }
});

【讨论】：

将宽度设置为${100}% 甚至不显示图像
尝试在photoContainer 样式中取消注释flex:1
是的，我试过了。取消注释宽度再次显示图像，但它与容器重叠，因为它在技术上比容器更宽

【解决方案3】：

我更喜欢ImageBackground。下面是实现你想要的View的代码：

 <ImageBackground
     imageStyle={styles.image}
     style={styles.imageContainer}
     source={{uri: this.state.imageUri}}>
         <TouchableOpacity onPress={this._pickImage} style={{
                           height: WIDTH/2,
                           width: WIDTH/2,
                           justifyContent: "center",
                           alignItems: "center"}}>
                                
                <Entypo name="camera" color={Colors.GREY} size={35}/>
                               
          </TouchableOpacity>
  </ImageBackground>

【讨论】：