[英]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.