Был добавлен экран-заставка, чтобы реагировать на родное (0.59) приложение с реагирующей навигацией (3.9) на эмуляторе Android, чтобы получить локальное значение и передать его обратно в App.js
для целей маршрутизации. Вот компонент SplashScreen
:
import React, { Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import helper from "../../lib/helper";
class SplashScreen extends React.Component {
......
async componentDidMount() {
const data = await this.performTimeConsumingTask();
this.props.navigation.navigate('App', {params : data}); //<<<===pass the params to App
}
render() {
return (
<View style = {styles.viewStyles}>
<Text style = {styles.textStyles}>
Blitz Reading
</Text>
</View>
);
}
}
const styles = {
.......
}
export default SplashScreen;
Локальные данные извлекаются после монтирования заставки. Затем полученный data
передается обратно в App.js
в качестве параметров. Вот App.js
:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
.....
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.info("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
});
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;
console.info("In App.js, props is : ", this.props); //<<==Value?
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;
Но вывод this.props
равен undefined
:
05-30 19:01:55.893 8312 8366 I ReactNativeJS: 'In App.js, props is : ', undefined
05-30 19:01:55.894 8312 8366 I ReactNativeJS: 'In App.js, props is : ', undefined
05-30 19:01:56.016 8312 8366 I ReactNativeJS: 'In App.js, props is : ', undefined
05-30 19:01:56.017 8312 8366 I ReactNativeJS: 'In App.js, props is : ', undefined
Я тоже пробовала navigation.state.params
и это тоже undefined
. Как получить доступ к параметрам, переданным в App.js
?
Поскольку вы перемещаетесь и передаете параметры навигаторам вкладок, вы должны получать их от родительского маршрутизатора.
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
...
const yourParams = navigation.dangerouslyGetParent().getParam('yourParamHere')
...
},
}),
navigation.dangerouslyGetParent().getParam('params')
справился.
Я получаю сообщение об ошибке, когда запускаю ваш фрагмент кода.