一堆屏幕后如何在反应导航中重新路由到App类?

时间:2019-06-09 21:31:16

标签: react-native react-navigation

这是带有响应导航3.9的react native 0.59中的App.js。对于新用户,初始屏幕将加载启动屏幕,并路由到Signup类中的Verif1App的堆栈导航。

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???
            }

0 个答案:

没有答案