反応するネイティブ・ナビゲーション・ナビゲーターは、私はまた、私のアプリでReduxのを使用していますウィックスでネイティブナビゲーションに反応（<a href="https://github.com/wix/react-native-navigation" rel="nofollow noreferrer">https://github.com/wix/react-native-navigation</a>）</p> <p>を使用しています未定義のカスタムボタン

Question

です。

トップバーにカスタムボタンを追加しようとしています。そのため、引き出しを開閉するようにすることができます。

次のように私はタブに引き出しを追加してい：

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

ナビゲーターは確かに定義されていません。なぜ私の言葉の人生のためにすることはできません。

navbarのカスタムボタンにナビゲータを渡すにはどうすればよいのですか？引き出しを開いたり、モーダルをトリガすることはできますか？

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ではサポートされていないことを忘れないでください。