Вот App.js
в реакции нативного 0.59 с реакцией навигации 3.9. Для нового пользователя начальный экран загрузит экран-заставку и перенаправит его в стек для классов Signup
и Verif1
в классе App
.
return createStackNavigator(
{
Signup: {screen: Signup},
Verif1: {screen: Verif1},
}
Вот код в App.js
:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { createBottomTabNavigator, createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import Event from './src/components/event/Event.js';
import Chat from './src/components/chat/Chat.js';
import Signup from "./src/components/signup/Signup.js";
import Verif1 from "./src/components/signup/Verif1.js";
import NewEvent from "./src/components/event/Newevent.js";
import EditUser from "./src/components/user/Edituser";
import NewUser from "./src/components/user/Newuser";
import io from 'socket.io-client';
import GLOBAL from "./src/lib/global";
import SplashScreen from "./src/components/splashscreen/SplashScreen";
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
//socket.io
const socket = io(GLOBAL.BASE_URL, {
transports: ['websocket'],
jsonp: false
});
console.log("socket id in App.js : ", socket.id);
socket.on('disconnect', (reason) => {
if (reason === 'io server disconnect') {
socket.connect();
}
});
const ChatWithSocket = (props) => (<Chat {...props} socket={socket} />)
const EventStack = {
Event: {
screen: Event,
navigationOptions: {
title: 'Event',
},
},
NewEvent: {
screen: NewEvent,
navigationOptions: {
title: 'New Event',
},
},
Chat: {
screen: ChatWithSocket,
navigationOptions: {
title: 'Chat',
},
},
};
const SignupStack = {
Signup: {
screen: Signup,
navigationOptions: {
title: 'Signup',
},
},
Verif1: {
screen: Verif1,
navigationOptions: {
title: 'Verify User',
},
},
};
const UserStack = {
NewUser: {
screen: NewUser,
navigationOptions: {
title: 'New User',
},
},
EditUser: {
screen: EditUser,
navigationOptions: {
title: 'Edit User',
},
},
};
const bottomTabNavOptions = {
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Event') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'User') {
iconName = `ios-options${focused ? '' : '-outline'}`;
}
return <Text>Hello the world!</Text>
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
};
//type Props = {};
class App extends React.Component {
bottomTabScreen = () => {
const data = this.props.navigation.state.params.data;
const EventWithSelf = (props) => (<Event {...props} myself={data.myself} token={data.result} />)
if (data.success && data.result && data.myself) {
return createBottomTabNavigator(
{
Event: {screen: EventWithSelf},
User: {screen: NewUser},
}, bottomTabNavOptions
);
} else {
console.log("return stack nav");
return createStackNavigator(
{
Signup: {screen: Signup},
Verif1: {screen: Verif1},
App: {screen: App} //<<<<<=== Is it the right way to add App as screen for this signup stack???
}
);
};
};
render() {
{
Signup: {screen: Signup},
Verif1: {screen: Verif1},
}, {
initialRouteName: "Verif1",
},
); */
const AppContainer1 = this.bottomTabScreen();
const AppContainer = createAppContainer(AppContainer1)
return <AppContainer />;
}
};
const InitialNavigator = createSwitchNavigator({
Splash: SplashScreen,
App: App,
});
//export it as the root component
export default createAppContainer(InitialNavigator);
В конце проверки в Verif1.js
приложение будет перенаправлено на экран App
с этим:
this.props.navigation.navigate('App', { data});
Как добавить App
в качестве экрана в стеке, чтобы приложение могло перенаправить приложение в Verif1.js
?
return createStackNavigator(
{
Signup: {screen: Signup},
Verif1: {screen: Verif1},
App: {screen: App} //<<<<<=== Is it the right way to add App as screen for this signup stack???
}