react-native-navigation 导航器是未定义的自定义按钮

Question

我正在使用 Wix 的 React Native Navigation (https://github.com/wix/react-native-navigation)

我也在我的应用程序中使用 Redux。

我正在尝试将自定义按钮添加到我的顶部栏，这样我就可以触发打开和关闭抽屉。

我正在向选项卡中添加一个抽屉，如下所示：

Navigation.startTabBasedApp({
    tabs: [
      {
        label: 'Home',
        screen: 'swiftyApp.Home',
        icon: icons.homeOutline,
        selectedIcon: icons.home,
        title: 'Home',
        navigatorStyle,
        navigatorButtons: {
          leftButtons: [
            {
              id: 'custom-button',
              component: 'CustomButton',
              passProps: {
                text: 'Hi!'
              }
            }
          ]
        }
      }
    ],
    drawer: {
      left: {
        screen: 'swiftyApp.Drawer',
        passProps: {}
      },
      style: {
        drawerShadow: false,
        contentOverlayColor: 'rgba(0,0,0,0.25)',
        leftDrawerWidth: 75,
        rightDrawerWidth: 25
      },
      type: 'MMDrawer',
      animationType: 'slide',

      disableOpenGesture: false
    },
    appStyle: {
      orientation: 'portrait',
      hideBackButtonTitle: true
    }
  });
});

我的自定义按钮组件看起来像

const CustomButton = props => {
  console.log(props);
  const { text, navigator } = props;
  return (
    <TouchableOpacity
      style={[styles.button, { backgroundColor: 'tomato' }]}
      onPress={() =>
        navigator.toggleDrawer({
          side: 'left',
          animated: true
        })
      }
    >
      <View style={styles.button}>
        <Text style={{ color: 'white' }}>{text}</Text>
      </View>
    </TouchableOpacity>
  );
};

按预期显示按钮并应用样式。但是，当单击按钮时会抛出一个异常，即 onPress 失败，因为 navigator.toggleDrawer 未定义，在检查传入的导航器道具的输出时，我可以在日志中看到：

2017-11-25 13:33:48.703 [info][tid:com.facebook.react.JavaScript] '************', { testID: 'CustomButton',
  navigator: undefined,
  passPropsKey: 'customButtonComponent3',
  rootTag: 21,
  text: 'Hi!' }

导航器确实未定义。我说不出为什么。

如何将导航器传递到诸如导航栏的自定义按钮之类的东西中，以便我可以打开抽屉或触发模式？

Answer 1

自定义按钮不与导航器相关联。您需要在屏幕的构造函数中设置按钮，并在道具中传递导航器。

constructor(props) {
    super(props);
    this.props.navigator.setButtons(this.navigatorButtons(this.props.navigator));
  }

  navigatorButtons = (navigator) => {
    return {
      leftButtons: [
        {
          id: 'custom-button',
          component: 'CustomButton',
          passProps: {
            text: 'Hi!',
            navigator
          }
        }
      ]
    };
  }

不要忘记 Android 不支持自定义左键。

react-native-navigation 导航器是未定义的自定义按钮

react-native-navigation navigator is undefined custom button

javascript

react-native-navigation

velo