2

我正在使用 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>
  );
};

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

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

Navigator 确实是未定义的。我一生都无法说出为什么。

如何将导航器传递给导航栏的自定义按钮，以便可以打开抽屉或触发模式？

4

1 回答 1

1

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

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 不支持自定义左键。

于 2017-11-26T09:15:18.420 回答