Как охватить все приложение с вкладками, используя реагировать родной и поток маршрутизатора? - PullRequest
Новая
       19

Как охватить все приложение с вкладками, используя реагировать родной и поток маршрутизатора?

0 голосов
/ 08 марта 2019

enter image description here

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

Проблема в том, что панель вкладок все еще активна, пользователь может переходить на другую вкладку, пока она занята. Также панель навигации не закрыта.

Есть ли какое-нибудь решение для этого?

1 Ответ

1 голос
/ 08 марта 2019

Возможно, вы не правильно структурировали свои сцены.Стили 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"
  }
});

lightbox

...