[英]React Native Pass Param From Drawer Navigator to Tab Navigator
我在抽屉式导航器中有一个选项卡导航器,我想将数据从绘图导航器传递到选项卡导航器中的页面。
我尝试使用以下方法在DrawerContainer.js中传递参数
this.props.navigation.navigate('TabsNav', {testParam: 'TEST'})
并通过“首页”屏幕中的this.props.navigation.getParam
对其进行this.props.navigation.getParam
。 但这没有用,因为它导航到TabNav然后呈现了HomePage。
如何将数据从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>
}
}
您需要导航到选项卡内部的特定屏幕,而不是选项卡本身,否则参数将进入选项卡导航器。 参数只会转到您直接导航到的路线。
所以
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);
希望对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.