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