Question

我只想知道如何以本机显示图像的一部分

class InstaClone extends Component {
render() {
    return(
        <View style={{ flex:1, width:100 + "%", height:100 + "%" }}>
            <View style={styles.TopNavStyle}>
                <Text style={styles.TopNavTextStyle}>
                    Instagram
                </Text>
            </View>

            <View style = {styles.userBar}>
            <View style = {{ flexDirection:"row" , alignItems:"center" }}>
                <Image style = {styles.userPic}
                    source = {require('../assets/images/photoUser.jpg')}/>
                <Text style = {{marginLeft : 10}}>
                    Mohcouch
                </Text>
            </View>

            <View>
            <View style={styles.imageContainer}>
                <ImageBackground
                source={require('../assets/images/icons.jpg')}
                style={styles.image}
                ></ImageBackground>
            </View>
            </View>
            </View>
            <Image 
            style={{ width:"100%", height:400 }} 
            source={require('../assets/images/baby.jpg')} 
            />
        </View>

    )
}

}

} , image: {
    height: 500,
    width: 500,
    resizeMode:"cover",
    translateX:-80,
    translateY: -135,

  },
  imageContainer: {
    height: 40,
    backgroundColor:'transparent',
    width: 40,
  },

}）

导出默认的InstaClone

结果：

https://scontent.xx.fbcdn.net/v/t1.15752-0/p280x280/58461695_2231014486986604_1022634010985103360_n.png?_nc_cat=102&_nc_ad=z-m&_nc_cid=0&_nc_zor=9&_nc_ht=scontent.xx&oh=cb81348aae1c524ba9e93d1e02afb120&oe=5D44DF9C

图标的图像： https://scontent.xx.fbcdn.net/v/t1.15752-0/p280x280/51865955_790216374668323_1242853141917990912_n.jpg?_nc_cat=102&_nc_ad=z-m&_nc_cid=0&_nc_zor=9&_nc_ht=scontent.xx&oh=1c6d18d17e24ec68771be2590fc934c4&oe=5D2CC871

Answer 1

React Native不支持属性background-position。最好将图标分隔在不同的图像文件中。

但是您可以使用一个棘手的解决方法来处理精灵图片：

首先，您需要按布局尺寸（dp）对图像像素进行四舍五入：

const width = PixelRatio.roundToNearestPixel(280);
const height = PixelRatio.roundToNearestPixel(280);

注意：280是您帖子中图片的大小

然后，我们需要为图标的大小计算相同的比例：

const iconWidth = PixelRatio.roundToNearestPixel(30);
const iconHeight = PixelRatio.roundToNearestPixel(30);

注意：30是我们图标的随机大小，可以是任意大小。

现在，为了加载图像，我们将使用react-native中的ImageBackground组件。对于imageStyle，我们将传递图像的定位属性：

imageStyle={{
    resizeMode: 'cover',
    width: width, height: height,
    top: -15,
    left: -15
}}

您的组件应如下所示：

<ImageBackground
    source={{ uri: image_url }}
    style={{ width: iconWidth, height: iconHeight, overflow: 'hidden' }}
    imageStyle={{
        resizeMode: 'cover',
        width: width, height: height,
        top: -15,
        left: -15
    }}
/>

这里是工作中的demo。

裁剪图标的图像

1 个答案: