web-dev-qa-db-ja.com

@ react-navigationドロワー内でuseNavigation（）を使用する方法

現在の動作

ルーティングに _react-navigation_ v5を使用する反応ネイティブアプリケーションがあります。

  1. すべてのビューにドロワー（オフセットメニューが残っています）があります
  2. 私はページ遷移にstackNavigationを使用しています。

（1）のため、私の構造はdrawerNavigator (a) > stackNavigator (b) > views (c)です。

_<DrawerContent />_内のuseNavigation()フックを呼び出そうとすると、次のエラーが発生します。

_Error: We couldn't find a navigation object. Is your component inside a navigator?
    at useNavigation (bundle.js:8766)
_

はい、私はstackNavigator内にいないので、フックを呼び出すことができません

予想される動作

私は_<DrawerContent />_内でナビゲーションを利用できると期待しています。

あなたの環境

_| software                       | version |
| ------------------------------ | ------- |
| iOS or Android                 | iOS, Android and web
| @react-navigation/native       | 5.0.0-alpha.41
| @react-navigation/stack         | 5.0.0-alpha.63
| @react-navigation/drawer       | 5.0.0-alpha.41
| react-native-reanimated        | 1.4.0
| react-native-gesture-handler   | 1.5.3
| react-native-safe-area-context | 0.6.2
| react-native-screens           | 2.0.0-alpha.32
| react-native                   | https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz
| expo                           | SDK36
| node                           | v13.5.0
| npm or yarn                    | 6.13.7
_

_@react-navigation/stack_ 内部で _@react-navigation/drawer_ をどのように使用できますか、それとも引き出しとアプリをどのように構築する必要がありますか？

javascriptreactjsreact-nativereact-navigationreact-context
3
Dimitri Kopriwa

ナビゲーターの画面を表示している場合は、useNavigationを使用する必要はありません。

ナビゲーターの構造は以下の通りです。

  • stackNavigator
    • drawNavigator
      • 引き出しスクリーン
  • stackScreens

画面の動きは以下の通りです。

例

_function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('moveScreenName')}
        title="Go to moveScreenName"
      />
    </View>
  );
}
_

useNavigationは、navigationオブジェクトへのアクセスを提供するフックです。 navigationプロップをコンポーネントに直接渡すことができない場合、または深くネストされた子の場合に渡したくない場合に便利です。

useNavigation()は、内部にある画面のナビゲーションプロップを返します。

例

_function MyBackButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Back"
      onPress={() => {
        navigation.goBack();
      }}
    />
  );
}
_
0
hong developer