如何使用本机反应和路由器通量覆盖整个选项卡式应用程序？答案

【问题标题】：How to cover the whole tabbed app using react native and router flux?如何使用本机反应和路由器通量覆盖整个选项卡式应用程序？
【发布时间】：2019-03-08 09:55:32
【问题描述】：

lightBox : {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    backgroundColor: rgba(0,0,0,0.7),
    position: 'absolute',
    top: -0,
    left: 0,
    zIndex: 9999,
    justifyContent : 'center'
}

问题是：标签栏仍然处于活动状态，用户可以在忙碌时导航到其他标签。此外，导航栏没有被覆盖。

有什么解决办法吗？

【问题讨论】：

这里的lightbox 是什么？屏幕内的组件？
对不起！是的...LightBox 是上图视图的一种样式。

标签： react-native react-native-router-flux

【解决方案1】：

您可能没有适当地构建场景。 Lightbox 样式对我来说似乎很好用。下面是一个简单的示例来展示您的要求。

import React from "react";
import { StyleSheet, Text, View, Dimensions } from "react-native";
import {
  Router,
  Scene,
  Actions,
  Lightbox,
  Tabs
} from "react-native-router-flux";

export default (App = () => (
  <Router>
    <Lightbox>
      <Tabs key="root">
        <Scene key="events" component={Events} title="Events" />
        <Scene key="missions" component={Missions} title="Missions" />
        <Scene key="share" component={Share} />
      </Tabs>
      <Scene key="uploading" component={Uploading} />
    </Lightbox>
  </Router>
));

class Missions extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text onPress={() => null}>Missions</Text>
      </View>
    );
  }
}

class Uploading extends React.Component {
  render() {
    return (
      <View
        style={{
          width: Dimensions.get("window").width,
          height: Dimensions.get("window").height,
          backgroundColor: "rgba(0, 0, 0, 0.7)",
          position: "absolute",
          top: 0,
          left: 0,
          zIndex: 9999,
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <Text style={{ color: "white" }} onPress={() => null}>
          Uploading
        </Text>
      </View>
    );
  }
}

class Share extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text onPress={() => Actions.uploading()}>Share</Text>
      </View>
    );
  }
}

class Events extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text onPress={() => null}>Events</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

【讨论】：