undefined 不是对象（正在计算 this.props.navigation.dispatch）

Question

我试图在下面的代码中使用 this.props.navigation.dispatch(DrawerActions.toggleDrawer())，但它将 this.props.navigation.dispatch 视为未定义。 我的代码：

//...imports
//set the function drawer inside a bottom tab navigator (works fine)

drawer = () => {
  return(
     <Drawer.Navigator>
       <Drawer.Screen name="first" component={firstScreen} />
       <Drawer.Screen name="second" children={this.TopTabStack} />
     </Drawer.Navigator>
  )
 }

 TopTab = () => {
   return(
     <MaterialTopTabs.Navigator
     initialRouteName="third"
     >
         <MaterialTopTabs.Screen name="third" component={thirdScreen} />
         <MaterialTopTabs.Screen name="fourth" component={fourthScreen} />
       </MaterialTopTabs.Navigator>
   )
 }

 TopTabStack = () => {
   return(
     <Stack.Navigator>
       <Stack.Screen name="second" children={this.TopTab} options={{
         headerRight: this.TopTabRightStack
       }} />
     </Stack.Navigator>
   )
 }

 TopTabRightStack = () => {
   return(
     <View>
       <TouchableWithoutFeedback onPress={async () => {this.props.navigation.dispatch(DrawerActions.toggleDrawer())}}>
         <Ionicons name="ios-menu" size={26} />
       </TouchableWithoutFeedback>
     </View>
   )
 }

Answer 1

由于您正在使用功能组件，因此无需使用 this，将其从给定代码中删除，然后再次 运行。

drawer = () => {
  return(
     <Drawer.Navigator>
       <Drawer.Screen name="first" component={firstScreen} />
       <Drawer.Screen name="second" children={TopTabStack} />
     </Drawer.Navigator>
  )
 }

 TopTab = () => {
   return(
     <MaterialTopTabs.Navigator
     initialRouteName="third"
     >
         <MaterialTopTabs.Screen name="third" component={thirdScreen} />
         <MaterialTopTabs.Screen name="fourth" component={fourthScreen} />
       </MaterialTopTabs.Navigator>
   )
 }

 TopTabStack = () => {
   return(
     <Stack.Navigator>
       <Stack.Screen name="second" children={TopTab} options={{
         headerRight: TopTabRightStack
       }} />
     </Stack.Navigator>
   )
 }

 TopTabRightStack = ({navigation}) => {
   return(
     <View>
       <TouchableWithoutFeedback onPress={async () = {navigation.dispatch(DrawerActions.toggleDrawer())}}>
         <Ionicons name="ios-menu" size={26} />
       </TouchableWithoutFeedback>
     </View>
   )
 }

Answer 2

好的，知道了：

//...imports
//set the function drawer inside a bottom tab navigator (works fine)

drawer = () => {
  return(
     <Drawer.Navigator>
       <Drawer.Screen name="first" component={firstScreen} />
       <Drawer.Screen name="second" children={this.TopTabStack} />
     </Drawer.Navigator>
  )
 }

 TopTab = () => {
   return(
     <MaterialTopTabs.Navigator
     initialRouteName="third"
     >
         <MaterialTopTabs.Screen name="third" component={thirdScreen} />
         <MaterialTopTabs.Screen name="fourth" component={fourthScreen} />
       </MaterialTopTabs.Navigator>
   )
 }

 TopTabStack = ({navigation) => {
   return(
     <Stack.Navigator>
       <Stack.Screen name="second" children={this.TopTab} options={{
         headerRight: () => (
          <View>
           <TouchableWithoutFeedback onPress={async () = {navigation.dispatch(DrawerActions.toggleDrawer())}}>
            <Ionicons name="ios-menu" size={26} />
           </TouchableWithoutFeedback>
          </View>
        ),
       }} />
     </Stack.Navigator>
   )
 }