React Navigation无法将参数传递给嵌套导航器

时间:2018-11-27 02:51:12

标签: reactjs react-native react-navigation

我正在使用React Native开发并使用React导航。我有一个选项卡导航器,其中嵌套的堆栈导航器代表每个选项卡。我试图从我的根组件导航,并将参数从选项卡导航器传递到嵌套堆栈导航器。因此,从App到HomeNavigator到Alerts。但是,对于嵌套堆栈组件中的参数,我变得不确定。对于此问题的任何帮助,我将不胜感激。

class App extends Component<Props> {

componentDidMount() {
  NavigationService.navigate('Alerts', { uploadedId: '12345' });
}

return (
   <HomeNavigator
     ref={navigatorRef => {
       NavigationService.setTopLevelNavigator(navigatorRef);
     }}
   />
 )
}

// Navigation Service
import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params
    })
  );
}

export default {
  navigate,
  setTopLevelNavigator,
};

// Navigator Definitions
export const AlertsStack = createStackNavigator({
  Alerts: {
    screen: Alerts,
  },
  AlertPost: {
    screen: AlertPost,
  },
})

export const HomeNavigator = createBottomTabNavigator(
  {
    Alerts: {
      screen: AlertsStack,
      navigationOptions: {
        // tabBarLabel: 'Alerts',
        tabBarIcon: ({ tintColor }) => <Icon name="notifications" size={35} color={tintColor} />
      },
    },
 }
)

class Alerts extends Component {

   componentDidMount() {
     // This is undefined everytime
     let uploadedId = this.props.navigation.state.params.uploadedId
   }

   render() {

   }

}

0 个答案:

没有答案