反應本地導航導航儀是不確定的自定義按鈕

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