Question

我正在使用Wix（https://github.com/wix/react-native-navigation）

的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!' }

导航器确实未定义。我不能为生命说出原因。

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

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

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

1 个答案: