原因は、GestureDetector が GestureHandlerRootView の外側で使用されていることを示しています。React Native アプリケーションで react-native-gesture-handler を正しく設定していないと発生します。この問題を解決するためには、GestureHandlerRootView を正しくアプリのルートに設定する必要があります。
目次
GestureHandlerRootView を正しい位置に設定する
App.js または index.js で、アプリケーションのルートを GestureHandlerRootView でラップ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React from 'react'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { StyleSheet } from 'react-native'; import MainApp from './MainApp'; // アプリのメインコンポーネント export default function App() { return ( <GestureHandlerRootView style={styles.container}> <MainApp /> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ container: { flex: 1, }, }); |
パッケージのインストールとリンク確認
react-native-gesture-handler を正しくインストールしていることを確認
インストールコマンド
|
1 |
npm install react-native-gesture-handler |
iOS の場合
iOS プロジェクトの依存関係を更新
|
1 |
npx pod-install |
Android の場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import com.facebook.react.ReactActivity; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; public class MainActivity extends ReactActivity { @Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected RNGestureHandlerEnabledRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; } } |
kotlin ver
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
package com.yourappname // プロジェクトのパッケージ名に置き換え import com.facebook.react.ReactActivity import com.facebook.react.ReactActivityDelegate import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView class MainActivity : ReactActivity() { override fun createReactActivityDelegate(): ReactActivityDelegate { return object : ReactActivityDelegate(this, mainComponentName) { override fun createRootView(): RNGestureHandlerEnabledRootView { return RNGestureHandlerEnabledRootView(this@MainActivity) } } } } |
DefaultReactActivityDelegate を使っている場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
package com.yourappname // パッケージ名をプロジェクトに合わせて変更 import com.facebook.react.ReactActivity import com.facebook.react.defaults.DefaultReactActivityDelegate import com.facebook.react.defaults.DefaultReactActivityDelegateFabricEnabled import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView class MainActivity : ReactActivity() { override fun createReactActivityDelegate(): ReactActivityDelegate { return object : DefaultReactActivityDelegate( this, mainComponentName, DefaultReactActivityDelegateFabricEnabled // Fabricを使用する場合はtrue ) { override fun createRootView(): RNGestureHandlerEnabledRootView { return RNGestureHandlerEnabledRootView(this@MainActivity) } } } } |
もしくは
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import android.os.Bundle import com.facebook.react.ReactActivity import com.facebook.react.ReactActivityDelegate import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled import com.facebook.react.defaults.DefaultReactActivityDelegate import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView class MainActivity : ReactActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(null) } override fun getMainComponentName(): String = "アプリ名" override fun createReactActivityDelegate(): ReactActivityDelegate { return object : DefaultReactActivityDelegate( this, mainComponentName, fabricEnabled ) { override fun createRootView(): RNGestureHandlerEnabledRootView { return RNGestureHandlerEnabledRootView(this@MainActivity) } } } } |
GestureDetector の正しい使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React from 'react'; import { View, Text } from 'react-native'; import { GestureDetector, Gesture } from 'react-native-gesture-handler'; export default function Example() { const tapGesture = Gesture.Tap().onStart(() => { console.log('Tapped!'); }); return ( <GestureDetector gesture={tapGesture}> <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Tap me!</Text> </View> </GestureDetector> ); } |
キャッシュクリア
|
1 |
npm start --reset-cache |
コメント