... Я пытаюсь удалить 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>
);
}
}
... Я хочу сначала отобразить логотип, а затем мне нужен экран входа/регистрации. После входа в систему пользователь может получить доступ к домашнему и внутреннему экранам. Но прямо сейчас я получаю главный экран в качестве начального экрана. Пожалуйста, помогите мне решить эту проблему. ...





Вы, вероятно, захотите сделать стек входа в систему маршрутом по умолчанию:
const MainNavigator = createBottomTabNavigator({
Home: HomeStack,
Clinic: ClinicStack,
Profile: ProfileStack,
Login: LoginStack
}, {initialRouteName: 'Login'});
Возможно, вы также захотите добавить экран-заставку, сделав его маршрутом по умолчанию.
const LoginStack = createStackNavigator ({
Login: Login,
SignUp: SignUp,
Splash: Splash
}, {initialRouteName: 'Splash')
Вы, вероятно, использовали бы навигатор переключателей со стеками входа и домашней страницы. И сделайте так, чтобы при переходе на страницу входа он проверял, следует ли перейти на домашнюю страницу. В противном случае, если я понимаю, о чем именно вы просите, вы бы сделали это так, чтобы иметь промежуточную страницу, которая решает, к какому стеку перейти, но, по сути, это достигает того же самого с дополнительной лишней страницей.
Вы можете взглянуть на мой код сейчас? На самом деле мне не нужен стек входа в навигатор нижней вкладки. Есть ли способ передать заставку и условно отобразить логин и домашнюю страницу?