web-dev-qa-db-ja.com

Reactナビゲーション：Androidで引き出しのスワイプが機能しない

私は長い間解決策を探していましたが、驚くべきことに、誰もまだそれに直面していないと思います。だから私はそれを投稿しています。

React Navigation V3を使用して簡単なドロワーナビゲーターを作成しました。メニューアイコンを追加しました。クリックすると、引き出しが本来の形で表示されます。しかし、手振りは機能していません。左から右にスワイプしても何も起こりません。引き出しが開いていても、空きスペースをタップしても引き出しは閉じません。

ここに私のコードがあります：

import {
    createStackNavigator,
    createSwitchNavigator,
    createAppContainer,
    createDrawerNavigator
} from 'react-navigation';
import Home from './screens/Home';
import LoginForm from './screens/LoginForm';
import Articles from './screens/Articles';

const AuthStack = createStackNavigator({
    LoginScreen: LoginForm
});

const AppStack = createDrawerNavigator({
    HomeScreen: Home,
    ArticlesScreen: Articles
});

const RootNavigator = createSwitchNavigator(
    {
        Auth: AuthStack,
        App: AppStack
    },
    {
        initialRouteName: 'Auth'
    }
);

export default createAppContainer(RootNavigator);
androidreact-nativereact-navigationswipe
36
Sadman Muhib Samyo

私は解決策を見つけました。 Reactナビゲーションはreact-native-gesture-handlerライブラリに依存します。 React Navigation docsのInstallationセクションでは、コマンドreact-native linkを使用してリンクを作成するようにしか指示されていません。 iOSにはこれで十分です。ただし、Androidの場合は、MainActivity.Javaファイルを編集する必要があります。これにより、ジェスチャーハンドラーライブラリが期待どおりに機能します。

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

ドキュメントを参照してください： https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

実際、Reactナビゲーションドキュメントでは、react-native-gesture-handlerではなくReact Navigationに固有であるため、ファイルを変更するためのナビゲーションドキュメントには何も記載されていません。私はここで答えを保持しているので、他の人を助けることができます。

UPDATE：React Navigationの最新ドキュメントはこの問題に対処しています

101
Sadman Muhib Samyo