react-native - 在 react native 中模糊图像的一半

Question

我正在使用这个 module用于显示模糊图像。我的问题是模糊应用于图像的底部。这个问题在 Android 中遇到，但 iOS 工作正常。请在 GitHub 中关注此问题:- enter link description here这是屏幕截图:-安卓:- 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% 或您需要的任何值。

希望这对您有所帮助。