反应导航通道具一类部件

Question

假设我有以下代码片段来创建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} /> 
); 

但是如果我宣布我的组件使用类组件，如何归档路过我的自定义道具到MyNavScreen

的相同的行为

class InboxScreen extends Component { 

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

Answer 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} /> 
); 
} 
}