反應導航通道具一類部件

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