这是带有响应导航3.9的react native 0.59中的App.js
。对于新用户,初始屏幕将加载启动屏幕,并路由到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
中重新路由到App?
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???
}