从抽屉导航器到标签导航器反应本机传递参数

Question

I have a tab navigator inside a drawer navigator and I want to pass data from the draw navigator to a page in the tab navigator.

I tried passing a parameter in the DrawerContainer.js using

this.props.navigation.navigate('TabsNav', {testParam: 'TEST'})

and retrive it by this.props.navigation.getParam in the HomePage screen. But this did not work because the its navigating to the TabNav then rendering the HomePage.

How do I pass data to the tab navigator form the DrawerContainer.js then to the HomePage screen.

TabNav.js

export const Tabs = createMaterialTopTabNavigator(
  {
    HomePage: {
      screen: Home,
    },
    ListView: {
      screen: List,
    },
  },

  {
    order: ['HomePage', 'ListView'],
  },
)

DrawerContainer.js

  render() {
    return (
      <View style={styles.container}>

        <View>
          <TouchableHighlight
            style={styles.TouchableHighlight}
            onPress={this.props.navigation.navigate('TabsNav', {testParam: 'TEST'})}

            <Text>Home</Text>
          </TouchableHighlight>
        </View>

        <View>
          <TouchableHighlight
            style={styles.TouchableHighlight}
            onPress={this.props.navigation.navigate('ProfilePage')}>

            <Text>List View</Text>
          </TouchableHighlight>
        </View>


      </View>
    )
  }
}

DrawNav.js

import { Tabs } from './TabNav.js'
import Profile from '../ProfilePage.js'
import DrawerContainer from '../DrawerContainer'

export const Draw = createDrawerNavigator(
  {
    TabsNav: {screen: Tabs},
    ProfilePage: {screen: Profile},
  },
  {
    contentComponent: DrawerContainer
  },


);

HomePage.js

export default class HomePage extends Component{

  componentWillMount(){
    console.log(this.props.navigation.getParam('testParam', null))
  }

  render(){
     <View>

     </View>

  }
}

Answer 1

you need to navigate to a screen specifically inside of the tab, not to the tab itself, or the params go into the tab navigator. params only go to the route that you are navigating to directly.

so

Drawer({
  TabsNav: Tab({
     HomePage: ScreenA,
     ListView: ScreenB,  
  })
});

navigate to HomePage or ListView rather than TabsNav

this.props.navigation.navigate('HomePage', { testParam: 'Test' })

Or you can also Dispatch Navigation Actions for this purpose as follow:

import { NavigationActions } from 'react-navigation';

const navigateAction = NavigationActions.navigate({ 

     routeName: 'HomePage', 

     params: { testParam: 'Test' }
});

this.props.navigation.dispatch(navigateAction);

I hope it help you.