如何使用 react native 和 router flux 覆盖整个选项卡式应用程序？

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

如何使用 react native 和 router flux 覆盖整个选项卡式应用程序？

How to cover the whole tabbed app using react native and router flux?

react-native

react-native-router-flux