react-navigation 将 props 传递给类组件答案

【问题标题】：react-navigation pass props to a class componentreact-navigation 将 props 传递给类组件
【发布时间】：2017-05-29 08:41:15
【问题描述】：

假设我有以下代码 sn-p 来创建DrawerNavigator

export const DrawerApp = DrawerNavigator({
    PageHome: {
        screen: InboxScreen
    },
},
{
    contentComponent: props => <RightMenuScreen />,
    drawerPosition: 'right'
});

我从示例 here 中读到，我可以使用类似

的语法将 banner 等道具传递给功能组件

const MyNavScreen = ({ navigation, banner }) => (<View><Text>{banner}</Text></View>);
// ...
// ...
// ...
const InboxScreen = ({ navigation }) => (
    <MyNavScreen banner={'InboxScreen'} navigation={navigation} />
);

但是如果我使用类 Component 声明我的 Component，我如何归档将自定义 prop 传递给 MyNavScreen 的相同行为

class InboxScreen extends Component {

    render() {
        // here I want to get a prop like `banner` or `callback` from props
    }
}

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

通过使用 this.props 你可以达到同样的效果

class InboxScreen  extends Component{
static navigationOptions = {
  drawerLabel: 'Inbox',
  drawerIcon: ({ tintColor }) => (
    <MaterialIcons
      name="move-to-inbox"
      size={24}
      style={{ color: tintColor }}
    />
  ),
};
render (){
  return(
  <MyNavScreen banner={'Inbox Screen'} navigation={this.props.navigation} />
  );
}
}

【讨论】：