未定义 - 从初始屏幕传递给“App.js”的参数

Question

在 android 模拟器上添加了一个闪屏以响应本机 (0.59) 应用程序和响应导航 (3.9) 以检索本地值并将其传递回 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.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
});

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.log("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的参数？

Answer 1

由于您导航并将参数传递给选项卡导航器，因此您必须从其父路由器中检索它

defaultNavigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ focused, tintColor }) => {
    ...
    const yourParams = navigation.dangerouslyGetParent().getParam('yourParamHere')
    ...
  },
}),