代码之家  ›  专栏  ›  技术社区  ›  jrocc

响应本地导航打开“从标题绘制”按钮

  •  2
  • jrocc  · 技术社区  · 6 年前

    我正试图从堆栈导航标题按钮打开导航绘图。标题按钮显示得很好,但是当我单击按钮时

    “未定义”不是一个对象(正在计算“”this.props.navigate“”)

    我似乎找不到一个很好的例子来说明如何做到这一点,或者是否有可能使用React导航。

    import React, { Component } from 'react';
    import { createStackNavigator, NavigationActions } from 'react-navigation'
    import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
    import { Draw } from './DrawNav.js'
    
    export const RootStack = createStackNavigator (
      {
        DrawNav: {
          screen: Draw,
          navigationOptions: ({ navigation }) => ({
            //Hide the shadow of the header
            headerStyle: {
              elevation:0,
              shadowColor: 'transparent',
              shadowRadius: 0,
              shadowOffset: {
                height: 0,
              }
            },
            headerLeft: (
              <View style={{marginLeft: 10}}>
                <Icon
                  name="menu"
                  size={25}
                  color="#D4AF37"
                  onPress={() => this.props.navigation.openDrawer()}
                />
              </View>
            ),
          })
        },
      },
    );
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   digit    6 年前

    this.props 仅在React类中使用。我假设您使用的是React Navigation v2,那么您应该像下面这样调度drawerAction

    import React, { Component } from 'react';
    import { createStackNavigator, NavigationActions } from 'react-navigation'
    import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
    import { DrawerActions } from 'react-navigation';
    import { Draw } from './DrawNav.js'
    
      export const RootStack = createStackNavigator (
      {
        DrawNav: {
          screen: Draw,
          navigationOptions: ({ navigation }) => ({
            //Hide the shadow of the header
            headerStyle: {
              elevation:0,
              shadowColor: 'transparent',
              shadowRadius: 0,
              shadowOffset: {
                height: 0,
              }
            },
            headerLeft: (
              <View style={{marginLeft: 10}}>
                <Icon
                  name="menu"
                  size={25}
                  color="#D4AF37"
                  onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
                />
              </View>
            ),
          })
        },
      },
    );