首页 > 解决方案 > 将参数传递给嵌套的 TabNavigator

问题描述

我有StackNavigator嵌套TabNavigator在其中,我正在导航到VisitUserPageNew并获取正在渲染的第一个屏幕中的参数,它是UserPage并且它可以工作。但是后来我试图将参数传递给嵌套UserSection并返回undefined

这是导航调用:

this.props.navigation.navigate('VisitUserPageNew',{
  visitorProps: {
    visitorNickName:this.props.linkPublisherNickName,
    visitor:true
  }
})

这些是我的组件:

class UserPage extends Component {
    visitorProps = this.props.navigation.getParam('visitorProps')

    render() {
        console.log(this.visitorProps) // return the object I need
        return(
            <View style={styles.container}>
                <Text>Text</Text>
                <View  style={{width:'100%',height:'100%',flex:1}}>
                    <UserSection
                        visitorProps={this.visitorProps}
                    />
                </View>    
            </View> 
        )
    }
} 

export default class UserLinks extends Component {
    render() {
        console.log(this.props.visitorProps) // return undefined
        return <View/>;
    }
}

export default class UserBookmarks extends Component {
    render() {
        console.log(this.props.visitorProps) // return undefined
        return <View/>;
    }
}  

这是路线结构:

export const UserSection = createMaterialTopTabNavigator({
    UserFeed: {
        screen: UserLinks,
    },
    Saved: {
        screen: UserBookmarks,
    },
})

export const UserPageNew = StackNavigator({
    UserSectionPage: {
        screen: UserPage
    },
    UserSection: {
        screen: UserSection
    },
})

export const Home = StackNavigator({
    Main: {
        screen: Main
    }, 
    VisitUserPageNew: {
        screen: UserPageNew
    },
})

所以将参数传递到第一个屏幕效果很好。但是,当我想继续将这些相同的参数传递给嵌套UserSection时,它会失败。visitorProps = this.props.navigation.getParam('visitorProps')我也试着在里面打电话UserBookmarksUserLinks但结果是一样的。我无法获得这些参数。

标签: javascriptreactjsreact-nativereact-navigation

解决方案


推荐阅读