如何从rootNavigator访问导航道具

Question

我正在尝试通过该应用创建通用标头。标题具有一些单击时会触发的导航功能。我正在尝试导航到另一个屏幕，并使用以下代码在此处打开抽屉。

export default class App extends Component {
  constructor(Props){
    super(Props)

  }
  render() {
    return (
       <View style={{flex:1}}>
       //Common header Starts
         <View style={{height:60,borderBottomWidth:2,borderBottomColor:"lightgrey",justifyContent:"center",paddingLeft:30}}>
        <TouchableOpacity onPress={()=>{this.props.navigation.openDrawer()}}>
          <Text>Open Drawer</Text>
        </TouchableOpacity>
<TouchableOpacity onPress={()=> 
   {this.props.navigation.navigate("ScreenTwo")}}>
          <Text>Go screntwo</Text>
        </TouchableOpacity>
     </View>
     //Common header Ends
     <Navi />
   </View>
);
  }
}
const s = StyleSheet.create({
  textWhite:{
    color:"white",
    fontWeight:"bold"
  }
})
const drawer = createDrawerNavigator({
    HomeScreen:{screen:ScreenThree},
    LoginController:{screen:LoginController}
})
const LoginController = createSwitchNavigator({
  Auth:{screen:Auth},
  Login:{screen:Login}
},{initialRouteName:"Auth"})

const AppNavigator = createStackNavigator({
    ScreenOne:{screen:ScreenOne},
    ScreenTwo:{screen:ScreenTwo},
    ScreenThree:{screen:ScreenThree},
    LoginController:{screen:LoginController}
},{headerMode:"none"});

const Navi = createAppContainer(AppNavigator);

我想打开抽屉，但是却收到错误消息无法读取未定义的属性“ navigate”。