Question

这似乎是一个简单的问题，但我需要将几个不同的视图彼此叠放并以编程方式隐藏/显示它们。每个人都需要填充100％的视口宽度和高度，并在其他视物的顶部进行分层。

在CSS中，我只会这样做。

.screen{
    width: 100%,
    height: 100%,
    position: absolute,
    z-index: 1 // Increasing as they stack
}

...但是反应原生等价物似乎没有起作用，该层完全从屏幕上消失了。另外，我正在使用Expo来在我的Android手机上显示此内容，因此无法像在Chrome中那样访问开发工具检查器，以找出问题所在。

似乎我需要的是这里的路由器，我确实打算使用一个路由器在我的主要路线之间进行切换，但这更多的是为了创建分层的背景效果，我需要将其置于所有屏幕的后面。

Answer 1

您需要添加top:0和left:0，也是zIndex而不是z-index。试试这个：

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

type Props = {};
export default class App extends Component<Props> {
  state = { screenToShow: 0 };
  componentDidMount() {
    this.changeScreen();
  }
  changeScreen() {
    setTimeout(() => {
      this.setState(
        {
          screenToShow: (this.state.screenToShow + 1) % 4,
        },
        this.changeScreen
      );
    }, 1000);
  }
  render() {
    const screenToShow = this.state.screenToShow;
    return (
      <View style={styles.container}>
        <View
          style={[
            styles.screen,
            { zIndex: screenToShow === 0 ? 1000 : -1, backgroundColor: 'red' },
          ]}
        />
        <View
          style={[
            styles.screen,
            { zIndex: screenToShow === 1 ? 1000 : -1, backgroundColor: 'blue' },
          ]}
        />
        <View
          style={[
            styles.screen,
            {
              zIndex: screenToShow === 2 ? 1000 : -1,
              backgroundColor: 'green',
            },
          ]}
         />
        <View
          style={[
            styles.screen,
             {
              zIndex: screenToShow === 3 ? 1000 : -1,
              backgroundColor: 'yellow',
            },
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
   },
  screen: {
    position: 'absolute',
    height: '100%',
    width: '100%',
    top: 0,
    left: 0,
  },
});

如何在Rect Native中堆叠视图？

1 个答案: