Заставка должна быть инициализирована перед рендерингом домашнего экрана

... Я пытаюсь удалить Drawer Navigation и вместо этого использовать нижнюю навигацию, но я не могу отобразить заставку, а затем домашний экран. Пожалуйста, помогите мне, так как я совершенно новичок в React Native. ...

... навигационный код ...

import React from "react";
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from "react-navigation";
import DoctorHome from "../containers/Home/DoctorHome/DoctorHome";
import Appointments from "../containers/DoctorFlow/Appointments/Appointments";
import EditProfile from "../containers/DoctorFlow/EditProfile/EditProfile";
import ViewClinic from "../containers/DoctorFlow/ViewClinic/ViewClinic";
import AddClinic from "../containers/DoctorFlow/AddClinic/AddClinic";
import Profile from "../containers/DoctorFlow/Profile/Profile";
import Proffession from "../containers/DoctorFlow/Profile/Proffession";
import {
  View,
  Image,
  Touchable,
  TouchableHighlight,
  TouchableNativeFeedback,
  Platform
} from "react-native";
  const HomeStack = createStackNavigator ({
    Home: DoctorHome,
    Appointments: Appointments,
    EditProfile: EditProfile
  });
  const ClinicStack = createStackNavigator ({
    Clinic: ViewClinic,
    AddClinic: AddClinic
  });
  const ProfileStack = createStackNavigator ({
    Profile: Profile,
    EditProfile: EditProfile,
    Proffession: Proffession
  });

  const MainNavigator = createBottomTabNavigator({
    Home: HomeStack,
    Clinic: ClinicStack,
    Profile: ProfileStack
});
export const AppNavigator = createAppContainer(MainNavigator);

... код заставки ...

import React, { Component } from "react";
import { AsyncStorage, Image, StyleSheet, Text, View } from "react-native";

import { connect } from "react-redux";
import TimerMixin from "react-timer-mixin";
import { StackActions, NavigationActions } from "react-navigation";
class Splash extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null
    };
  }
  componentWillMount() {}

  componentDidMount() {
    this.getUser();
    TimerMixin.setTimeout(() => {
      if (this.state.user) {
        console.info(this.state.user.user.userType);
        if (this.state.user.user.userType == "DOCTOR") {
          if (this.state.user.user.isProfileCompleted == false) {
            this.props.navigation.dispatch(
              StackActions.reset({
                index: 0,
                actions: [
                  NavigationActions.navigate({ routeName: "EditDoctorProfile" })
                ]
              })
            );
          } else {
            this.props.navigation.dispatch(
              StackActions.reset({
                index: 0,
                actions: [
                  NavigationActions.navigate({ routeName: "DoctorHomeMenu" })
                ]
              })
            );
          }
        }
      } else {
        this.props.navigation.dispatch(
          StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: "Login" })]
          })
        );
      }
    }, 1000);
  }

  async getUser() {
    await AsyncStorage.getItem("user").then(user =>
      this.setState({ user: JSON.parse(user) })
    );
  }
  render() {
    return (
      <View
        style = {{
          justifyContent: "center",
          alignItems: "center",
          flex: 1,
          backgroundColor: "#fff"
        }}
      >
        <Image
          style = {{ width: 200, height: 40 }}
          source = {require("../Images/logo/logo.png")}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
    padding: 16
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

const mapDispatchToProps = dispatch => ({
  Login: () =>
    dispatch(
      NavigationActions.navigate({
        routeName: "Login"
      })
    )
});

export default connect(
  null,
  mapDispatchToProps
)(Splash);

... App.js (точка входа) ...

import React from "react";
import { View, StatusBar } from "react-native";
import { Provider } from "react-redux";
import { AppNavigator } from "../Navigation/RootNavigation";
import configureStore from "../store/ConfigureStore";
import color from "../ui/color";
const store = configureStore();
export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View
        style = {{
          flex: 1,
          backgroundColor: color.primary
        }}
      >
        <StatusBar
          backgroundColor = {"#000"}
          barStyle = "light-content"
          hidden = {false}
        />
        <Provider store = {store}>
          <AppNavigator />
        </Provider>
      </View>
    );
  }
}

... Я хочу сначала отобразить логотип, а затем мне нужен экран входа/регистрации. После входа в систему пользователь может получить доступ к домашнему и внутреннему экранам. Но прямо сейчас я получаю главный экран в качестве начального экрана. Пожалуйста, помогите мне решить эту проблему. ...

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
738
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы, вероятно, захотите сделать стек входа в систему маршрутом по умолчанию:

const MainNavigator = createBottomTabNavigator({
    Home: HomeStack,
    Clinic: ClinicStack,
    Profile: ProfileStack,
    Login: LoginStack
}, {initialRouteName: 'Login'});

Возможно, вы также захотите добавить экран-заставку, сделав его маршрутом по умолчанию.

 const LoginStack = createStackNavigator ({
    Login: Login,
    SignUp: SignUp,
    Splash: Splash
  }, {initialRouteName: 'Splash')

Вы можете взглянуть на мой код сейчас? На самом деле мне не нужен стек входа в навигатор нижней вкладки. Есть ли способ передать заставку и условно отобразить логин и домашнюю страницу?

TheReactor 25.03.2019 14:57

Вы, вероятно, использовали бы навигатор переключателей со стеками входа и домашней страницы. И сделайте так, чтобы при переходе на страницу входа он проверял, следует ли перейти на домашнюю страницу. В противном случае, если я понимаю, о чем именно вы просите, вы бы сделали это так, чтобы иметь промежуточную страницу, которая решает, к какому стеку перейти, но, по сути, это достигает того же самого с дополнительной лишней страницей.

winnie 26.03.2019 05:43

Другие вопросы по теме