在本机图像中模糊图像的一半

Question

我正在使用此module来显示模糊图像。我的问题是将模糊应用于图像的底部。这个问题在Android中会遇到，但iOS可以正常工作。 请在GitHub中关注此问题：-enter link description here 这是屏幕截图：- Android： iOS：-

Answer 1

<View style={styles.container}>
     <Text>Hi, I am some unblurred text</Text>
     <Image source={{ uri: 'https://picsum.photos/200/300' }} style={styles.img} />
     <BlurView style={styles.blur} blurType="light" blurAmount={10} />
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    position: 'relative',
    zIndex: 1
  },
  img: {
    flex: 1,
    position: 'relative',
    height: '100%',
    zIndex: 2,
    width: '100%'
  },
  blur: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    right: 0,
    height: '30%',
    zIndex: 3
  }
});

嗨，仅是对每个元素进行样式设置的情况，在这种情况下，它的高度为30％，但是您可以将项目上的数字更改为50％或任何您需要的形状。

希望这会有所帮助。