Question

... 我试图删除“抽屉导航”并改为使用底部导航，但是无法显示初始屏幕，然后显示主屏幕。请帮助我，因为我是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.log(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>
    );
  }
}

... 我要先显示徽标，然后要登录/注册屏幕。用户登录后，便可以访问主屏幕和内部屏幕。但是现在，我直接将主屏幕作为开始屏幕。请帮助我解决此问题。 ...

Answer 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')

启动画面应在呈现主屏幕之前进行初始化

1 个答案: