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

将这些想法应用到您正在运行的应用程序中，即可实现所需的功能。

反应本机透明叠加层暴露了一些成分

1 个答案: