react-native 透明覆盖暴露一些组件

Question

我怎样才能创建一个透明的覆盖层来暴露一些组件，比如按钮、图标？以便它可以用作教程屏幕。

我想实现如图所示的效果。

Answer 1

您需要模态叠加层。为此，您必须在当前组件上添加具有不透明样式的 <View>。在那个 <View> 中，您必须添加自己的自定义图像（例如带有箭头）并根据需要放置它们。

要添加不透明度，您可以使用 opacity 属性添加样式，如下所示：

overlay: {
  opacity: 0.5,
}

您可以根据需要设置不透明度的值（在 0 和 1 之间）。

如果您希望它与屏幕一样大并且位于您的组件上方，您可以添加如下内容：

overlay: {
  position: 'absolute',
  height: '100%',
  width: '100%',
  backgroundColor: '#fff',
  opacity: 0.5,
}

或：

overlay: {
  position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  backgroundColor: '#fff',
  opacity: 0.5,
}

现在，对于叠加层中的空洞，可以通过适当使用 z-index 属性来实现。只要组件具有较高的 z-index 值，它就会位于具有较低值的组件之上。

要将 z-index 分配给样式，请像这样使用它：

onTop: {
  zIndex: 2
}

below: {
  zIndex: 1
}

完整示例

这是模态叠加层的工作示例，其中文本 This is always on top 始终位于顶部：

import React, { Component } from 'react';
import { Image, StyleSheet, View, Text  } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.mainText}>This is always on top</Text>
        <View style={styles.overlay}>
          <Text>This is an overlay</Text>
          <Text>This is an overlay</Text>
          <Text>This is an overlay</Text>
          <Text>This is an overlay</Text>
          <Text>This is an overlay</Text>
          <Text>This is an overlay</Text>
          <Text>This is an overlay</Text>
          <Text>This is an overlay</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor: "#00ff00",
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    justifyContent: "center",
    alignItems: "center",
    zIndex: 1
  },
  mainText:{
    fontSize: 30,
    zIndex: 3,
    backgroundColor: '#ff0000',
  },
  overlay: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    backgroundColor: '#fff',
    color: '#000',
    opacity: 0.5,
    justifyContent: "center",
    alignItems: "center",
    fontSize: 24,
    zIndex: 2
  }
});

将这些想法应用到您的工作应用程序中，您可以实现您正在寻找的东西。

react-native 透明覆盖暴露一些组件

react-native trasparent overlay exposing some component

overlay

react-native