我正在使用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() {
}
}