反应本地导航导航仪是不确定的自定义按钮

Question

我使用由维克斯（https://github.com/wix/react-native-navigation）反应本地导航

我使用终极版与我的应用程序也。

我想添加一个自定义按钮到我的顶栏，所以我可以触发打开和关闭抽屉。

我增加了抽屉的标签如下：

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

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

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