React native 模糊图像中的一半

我用这个来显示模糊图像。我的问题是模糊应用于图像的底部。这个问题在安卓系统中也存在，但iOS运行良好。 请关注GitHub中的此问题：- 以下是截图：- 安卓：- iOS:-

嗨，我是一些无障碍的文本
const styles=StyleSheet.create({
容器：{
弹性：1，
justifyContent:“柔性端”，
对齐项目：“居中”，
位置：'相对'，
zIndex:1
},
img：{
弹性：1，
位置：'相对'，
高度：“100%”，
zIndex:2，
宽度：“100%”
},
模糊：{
位置：'绝对'，
左:0,，
底部：0，
右:0,，
身高：30%，
zIndex:3
}
});

嗨，只是一个设计每个元素的例子，在这个例子中，它是30%高，但是你可以在你的项目中将这个数字改为50%或者你需要的任何数字

希望这有帮助

<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
  }
});