React native react本机传输覆盖暴露某些组件

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

我想达到如图所示的效果

---

您需要一个模式覆盖。要实现这一点，必须在当前组件上添加具有不透明度样式的

。在该

中，您必须添加自己的自定义图像（例如箭头），并根据需要定位它们

要添加不透明度，可以使用

opacity

属性添加样式，如下所示：

overlay: {
  opacity: 0.5,
}

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

onTop: {
  zIndex: 2
}

below: {
  zIndex: 1
}

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

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

overlay: {
  opacity: 0.5,
}

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

onTop: {
  zIndex: 2
}

below: {
  zIndex: 1
}

或：

现在，对于叠加中的孔，可以通过正确使用z索引属性来实现。只要组件的z索引值较高，它就会位于具有较低值的组件的顶部

要将z索引指定给样式，请如下使用：

overlay: {
  opacity: 0.5,
}

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

onTop: {
  zIndex: 2
}

below: {
  zIndex: 1
}

完整示例

这是一个模式覆盖的工作示例，其中文本

始终位于顶部

，始终位于顶部：

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

import React，{Component}来自'React'；
从“react native”导入{Image，StyleSheet，View，Text}；
导出默认类应用程序扩展组件{
render（）{
返回(
这总是最重要的
这是一个覆盖图
这是一个覆盖图
这是一个覆盖图
这是一个覆盖图
这是一个覆盖图
这是一个覆盖图
这是一个覆盖图
这是一个覆盖图
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景色：“00ff00”，
排名：0，
右:0,，
底部：0，
左:0,，
辩护内容：“中心”，
对齐项目：“中心”，
zIndex:1
},
正文：{
尺寸：30，
zIndex:3，
背景颜色：“#ff0000”，
},
覆盖：{
位置：'绝对'，
排名：0，
右:0,，
底部：0，
左:0,，
背景颜色：“#fff”，
颜色：“#000”，
不透明度：0.5，
辩护内容：“中心”，
对齐项目：“中心”，
尺寸：24，
zIndex:2
}
});

将这些想法应用到你的工作应用程序中，你就能实现你想要的