Застрял на заставке - PullRequest
0 голосов
/ 30 мая 2019

Добавлен экран-заставка для реакции собственного приложения (0.59) с реагирующей навигацией (3.9) на эмуляторе Android.Вот компонент SplashScreen:

import React, { Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import helper from "../../lib/helper";

class SplashScreen extends React.Component {
    performTimeConsumingTask = async() => {
      var result, user;
      try {
      result = await helper.getJwtToken();
      if (result) {
        user = await helper._getUser(result.password, result.username); 
        if (user) {
            return {
                user,
                result,
                success: true
              }      
        } else {
            return {
                user: null,
                result: result,
                success: true
              }      
        };
      } else {
            return {
            user: null,
            result: null,
            success: true
            };
      };
     } catch (err) {
      console.log("Error in retrieving token : ", err);
      return {
        success: false,
        error: err.message
      };

    };
    }

    async componentDidMount() {
        const data = await this.performTimeConsumingTask();
        if (data !== null && data.user !== null && data.success === true) {
            this.props.navigation.navigate('App', {params  : data});
        }
    }

    render() {
        return (
          <View style={styles.viewStyles}>
            <Text style={styles.textStyles}>
              Blitz Reading
            </Text>
          </View>
        );
      }
    }

    const styles = {
      viewStyles: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'orange'
      },
      textStyles: {
        color: 'white',
        fontSize: 40,
        fontWeight: 'bold'
      }
    }

    export default SplashScreen;

Локальные данные извлекаются после монтирования заставки.Затем извлеченные data передаются обратно в App.js в качестве параметров.Вот App.js:

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, {
  //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();
  }
  // else the socket will automatically try to reconnect
});

console.log("In App.js, token retrieved is : ", this.props);
const ChatWithSocket = (props) => (<Chat {...props} socket={socket} />)

//create the navigator
const EventStack = createStackNavigator(
  {
    Event:  Event,
    NewEvent: NewEvent,
    Chat: {
      screen: ChatWithSocket,

    },
    Signup: Signup,
    Verif1: Verif1,

  },  {
    initialRouteName: 'Verif1',
  } 
);

const UserStack = createStackNavigator(
  {
    NewUser: NewUser,
    EditUser: EditUser,    
  }, {
      initialRouteName: "NewUser",
  }

);

const bottomTabNav = createBottomTabNavigator(
    {
      Event: {screen: EventStack},
      User: {screen: UserStack},
    },
    {
        defaultNavigationOptions: ({ navigation }) => ({
          tabBarIcon: ({ focused, tintColor }) => {
            const { routeName } = navigation.state;
            let iconName;
            if (routeName === 'Event') {
              iconName = `ios-information-circle${focused ? '' : '-outline'}`;
            } else if (routeName === 'NewUser') {
              iconName = `ios-options${focused ? '' : '-outline'}`;
            }


            return <Text>Hello the world!</Text>
          },
        }),
        tabBarOptions: {
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        },
      }
    );

const InitialNavigator = createSwitchNavigator({
  Splash: SplashScreen,
  App: bottomTabNav,
});


const AppContainer = createAppContainer(InitialNavigator);

export default AppContainer;

Экран-заставка добавлен в InitialNavigator помимо экрана App, который должен быть загружен после заставки.Вот журнал приложения (console.log удален из кода для легкого чтения):

05-30 13:08:54.297  6116  6180 I ReactNativeJS: 'socket id in App.js : ', undefined
05-30 13:08:54.327  6116  6180 I ReactNativeJS: 'In App.js, token retrieved is : ', undefined
05-30 13:08:54.908  6116  6180 I ReactNativeJS: Running application "emps_app" with appParams: {"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
05-30 13:08:55.167  6116  6180 I ReactNativeJS: In Splashscreen DidMount
05-30 13:08:55.308  6116  6180 I ReactNativeJS: 'SplashScreen token result is : ', ''
05-30 13:08:55.309  6116  6180 I ReactNativeJS: Splashscreen result is nothing
05-30 13:08:55.366  6116  6180 I ReactNativeJS: 'After retrieve in spliashscreen : ', { user: null, result: null, success: true }

Кажется, что заставка была успешно отрисована, но ничего не было найдено (правильно!).Проблема в том, что приложение застряло на заставке и не двигается дальше.

...