React native 反应本机-映像比父映像大

就像在tinder中一样，我有一个带有3个图像选择器的屏幕。当我从库中拾取图像时，我希望它保留在

TouchableOpacity

容器中。但是，图像与容器重叠

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

有什么问题

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

/*eslint禁用反应本机/无内联样式*/
从“React”导入React，{useState}
进口{
文本，
看法
形象,，
按钮
可触摸不透明度，
样式表，
尺寸，
}从“反应本机”
从“反应本机图像裁剪选择器”导入图像选择器
从“@fortawesome/react-native-fontawesome”导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{faPlusCircle}
从“../../../constants/Colors”导入颜色
const{width:width}=Dimensions.get（'window'）
const ProfileEdit=（）=>{
const[photo，setPhoto]=useState（null）
常量handleChoosePhoto=（）=>{
ImagePicker.openPicker({
宽度：300，
身高：400，
裁剪：没错，
})。然后（（图像）=>{
背景照片({
uri:image.path，
宽度：image.width，
高度：image.height，
mime:image.mime，
})
console.log（图像）
})
}
返回(
handleChoosePhoto（）}
style={style.button}>
{照片(
) : (
)}
handleChoosePhoto（）}
style={style.button}>
handleChoosePhoto（）}
style={style.button}>
)
}
const styles=StyleSheet.create({
主要内容：{
弹性：1，
},
图标：{}，
按钮：{
高度：`${100}%`，
背景颜色：Colors.defaultWhite，
填充：2，
对齐项目：“居中”，
为内容辩护：“中心”，
边界半径：3，
},
按钮振打器：{
宽度：宽度/3，
填充：10，
},
按钮行：{
弹性系数：0.3，
flexWrap:“wrap”，
flexDirection:'行'，
},
照片:{
宽度：宽度/2，
高度：宽度/2，
//边界半径：3，
resizeMode:'包含'，
},
})
导出默认配置文件编辑

不要计算图像宽度，请尝试以下操作：

handleChoosePhoto（）}
style={style.button}>
{照片(
) : (
)}
const styles=StyleSheet.create({
光容器：{
//弹性：1
},
照片:{
高度：宽度/2，
宽度：“100%”，
resizeMode:“包含”
}
});

按说明更正答案

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

---

我更喜欢

ImageBackground

。下面是实现所需

视图的代码：

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


将宽度设置为
${100}%
甚至不会显示图像在
photoContainer
样式中尝试取消注释
flex:1
。取消注释宽度再次显示图像，但它与容器重叠，因为从技术上讲它比容器宽
 <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>