在 React-Native 中使用嵌套的 StackNavigators 和 TabNavigators 传递道具答案

【问题标题】：Passing props using nested StackNavigators and TabNavigators in React-Native在 React-Native 中使用嵌套的 StackNavigators 和 TabNavigators 传递道具
【发布时间】：2018-06-22 09:50:33
【问题描述】：

export default class Home extends React.Component {
      static navigationOptions = {  headerLeft: null, header: null};
      constructor(props){
         super(props);
         this.state = {
           userID: this.props.navigation.getParam('userId')
         };
       }
      render() {
        userId = this.props.navigation.getParam('userId');
        return <HomeNav userId={this.state.userId}/>;
      }
    }


    const HomeNav = TabNavigator({
    MyEvents: { screen: props => <MyEvents userId={userId}/>},
      MyTickets: { screen: props => <MyTickets userId={userId}/>},
    }, {tabBarPosition:'bottom'});

我的屏幕结构是：

Stacknavigator（登录和主页）
主页是一个标签导航器（活动和门票）

我知道如何将用户 ID 从登录名传递到主页（您可以在上面看到我正在检索它）。我尝试了很多方法将用户 ID 传递给我的选项卡导航器，然后传递给它的孩子。我在上面尝试的方式有效，但我想知道如何正确执行此操作并能够访问 MyTickets 和 MyEvents 中的导航道具。谢谢。

【问题讨论】：

标签： reactjs react-native react-navigation react-native-navigation

【解决方案1】：

export default class Home extends React.Component {
    static navigationOptions = {
        headerLeft: null,
        header: null
    };
    constructor(props) {
        super(props);
        this.state = {
            userID: this.props.navigation.getParam('userId')
        };
    }
    render() {
        userId = this.props.navigation.getParam('userId');
        return <Home userId = {
            this.state.userId
        }
        />;
    }
}

const Home = (props) => {
    const user = {
        id: props.userId
    }
    return ( <
        HomeNav screenProps = {
            user
        }
        />
    );
}


const HomeNav = TabNavigator({
    MyEvents: MyEvents,
    MyTickets: MyTickets,
}, {
    tabBarPosition: 'bottom'
});

现在在 MyEvents 和 MyTickets 选项卡中，您可以访问该值

const { screenProps } = this.props;
const userId =screenProps.id;

希望对你有帮助！

【讨论】：

非常感谢@kosairam。这很有帮助:)