反应本机透明覆盖暴露一些组件

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

将这些想法应用到您的工作应用程序中，您就可以实现您想要的目标。