7

すべての画面でグローバルに HeaderLeft メニュー アイコンを表示したい。メニュー アイコンをクリックすると、ドロワー メニューを表示する必要があります。ドロワーメニューの開閉には「OpenDrawer」、「CloseDrawer」メソッドを使用しています。

しかし、私は常に取得しています」undefined is not a function (evaluating 'props.navigation.openDrawer()')"。次のことも試しました

props.navigation.dispatch(DrawerActions.openDrawer())
props.navigation.navigate(openDrawer())

しかし、上記のどれもうまくいきませんでした。ここに私の部分的なコードがあります

const MenuButton = (props) => {
  return (
    <View>
      <TouchableOpacity onPress={() => { props.navigation.dispatch(DrawerActions.openDrawer())} }>
        <Text>Menu</Text>
      </TouchableOpacity>
    </View>
  )
};

const MyDrawerNavigator = createDrawerNavigator(
  {
    Wishist: {
      screen: wishlist
    },
  },
  {
    contentComponent: SideMenuScreen,
    drawerWidth: 200,
  }
);

const AppNavigator = createBottomTabNavigator({
  Home: {
    screen: createStackNavigator({
      Home: {
        screen: Home
      },
      Contact: {
        screen: Contact
      }
    },
    {
      defaultNavigationOptions: ({ navigation }) => ({
        headerStyle: {
          backgroundColor: 'white',
          borderWidth:0,
          borderBottomWidth:0
        },
        headerTitle: headerTitleNavigationOptions('HOME'),
        headerLeft: <MenuButton navigation={navigation}/>,
        headerRight: headerRightNavigatorOptions(navigation)
      })
    }),
    navigationOptions: ({ navigation }) => ({
      headerStyle: {
          backgroundColor: 'white',
          borderWidth:0,
          borderBottomWidth:0
      },
    }),
  }},
  {
    tabBarOptions: {
      showLabel: false,
      style: {
        backgroundColor: 'white',
        borderTopWidth:1
      }
    },
    initialRouteName: 'Home',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false
  }
);

const App = createAppContainer(AppNavigator);
4

2 に答える 2

3

ドキュメントで説明されているようにDrawerActions、コンポーネントにをインポートする必要がありますreact-navigation-drawer

DrawerActions は、引き出しベースのナビゲーターに固有のアクションを生成するためのメソッドを含むオブジェクトです。そのメソッドは、NavigationActions で使用可能なアクションを拡張します。

次のアクションがサポートされています。

  • openDrawer- 引き出しを開く
  • closeDrawer- 引き出しを閉めます
  • toggleDrawer- 状態を切り替えます。閉じた状態から開いた状態に、またはその逆に切り替える
import { DrawerActions } from 'react-navigation-drawer';

this.props.navigation.dispatch(DrawerActions.openDrawer())

APIはreact-navigation詳細情報を提供しませんが、詳細についてはNavigationActionsAPI リファレンスを参照してください。

NavigationActions リファレンス

すべてメソッドNavigationActionsを使用してルーターに送信できるオブジェクトを返します。navigation.dispatch()

アクションをディスパッチreact-navigationする場合は、このライブラリで提供されているアクション クリエーターを使用する必要があることに注意してください。

コンポーネントにインポートする必要があり、次のようなアクションをNavigationActions実行できますdispatchthis.props.navigation.dispatch(navigateAction);

import { NavigationActions } from 'react-navigation';

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',

  params: {},

  action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});

this.props.navigation.dispatch(navigateAction);

また、Ashwin Mothilalnavigationから説明されているように、コンポーネント内で小道具を渡していることを確認してください。たとえば、を実行するconsole.warn(props)と、すぐにエミュレーターで結果を確認できます。これはあなたのコンポーネントです：

import { DrawerActions } from 'react-navigation-drawer';

const MenuButton = (props) => {
  return (
    <View>
      <TouchableOpacity onPress={() => {
          console.warn(props);
          props.navigation.dispatch(DrawerActions.openDrawer());
      }}>
        <Text>Menu</Text>
      </TouchableOpacity>
    </View>
  )
};
于 2019-05-14T14:15:09.603 に答える