React Native Pass Param 从抽屉导航器到选项卡导航器答案

【问题标题】：React Native Pass Param From Drawer Navigator to Tab NavigatorReact Native Pass Param 从抽屉导航器到选项卡导航器
【发布时间】：2019-05-18 17:48:27
【问题描述】：

我在抽屉导航器中有一个选项卡导航器，我想将数据从绘图导航器传递到选项卡导航器中的页面。

我尝试使用在 DrawerContainer.js 中传递一个参数

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

并在主页屏幕中通过this.props.navigation.getParam 检索它。但这不起作用，因为它导航到 TabNav 然后呈现主页。

如何将数据从 DrawerContainer.js 传递到选项卡导航器，然后传递到主页屏幕。

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>

  }
}

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

您需要导航到特定于选项卡内部的屏幕，而不是选项卡本身，或者参数进入选项卡导航器。参数只转到您直接导航到的路线。

所以

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

导航到 HomePage 或 ListView 而不是 TabsNav

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

或者您也可以为此目的分派导航操作，如下所示：

import { NavigationActions } from 'react-navigation';

const navigateAction = NavigationActions.navigate({ 

     routeName: 'HomePage', 

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

this.props.navigation.dispatch(navigateAction);

希望对你有帮助。

【讨论】：