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

Question

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'
}

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

对此有何解决方案？

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