web-dev-qa-db-ja.com

undefinedはオブジェクトではありません（「RNGestureHandlerModule.State」を評価します）

私はreact-navigationをReact Nativeプロジェクトにインストールしました。そのスタータープロジェクトにはコードがありません。しかし、プロジェクトの実行中に、このようなエラーに直面しています。

これが私のナビゲーションコードです

import { createStackNavigator } from 'react-navigation';

import Home from './screens/Home';
import WeatherDetail from './screens/WeatherDetail';


const Navigation = createStackNavigator({
  Home: { screen: Home },
  WeatherDetail: {
  screen: WeatherDetail
 } 
});

export default Navigation;

そして、ここにApp.jsコードがあります

 import Navigator from './Router';


 export default class App extends Component {
   render() {
     return (
       <View style={styles.container}>
         <Navigator />
       </View>
     );
    }
  }

App.jsからナビゲータコンポーネントを削除し、Textに置き換えた場合、アプリケーションはエラーなしで実行されます。

react-nativereact-navigation
39
Ish Man
  1. node_modulesおよびpackage-lock.jsonを削除します
  2. npm install
  3. npm install --save react-navigation
  4. npm install --save react-native-gesture-handler
  5. react-native link
86
Amiri Houssem

まず、node_modulesとpackage-lock.jsonを削除して、npm installを実行します。 React Nativeプロジェクトにreact-navigationパッケージをインストールした後。 react-native-gesture-handlerをインストールする必要があります。 Expoを使用している場合、ここで何もする必要はありません。これはSDKに含まれています。そうでなければ：

npm install react-native-gesture-handler

最後に、次のようにジェスチャー依存関係をリンクします。

react-native link react-native-gesture-handler

React Navigation document に基づくこの回答。

4
Ali Hesari

反応リンクを使用して依存関係をリンクしている場合：

  1. 0 ios Podfileをペンし、youtにリンクされたすべての依存関係を削除します：pod 'xxxxxxx'、：path => '../node_modules/xxxxx
  2. Xcodeを閉じる
  3. / iosフォルダーで「pod update」を実行します
  4. プロジェクトソースで「react-native link」を実行します
  5. Xcodeを開き、Xcodeメニュー->製品からビルドフォルダーを削除します。
  6. Xcodeからアプリケーションを実行する
  7. ドキュメントの手順に従って、依存関係「react-native-gesture-handler」をXcodeプロジェクトに手動でリンクします。 https://facebook.github.io/react-native/docs/linking-libraries-ios
  8. Xcodeからアプリケーションを実行します。大丈夫です。
4
hicham naimi

公式ドキュメントから：

React Native> = 0.60を使用している場合、最初にreact-native-gesture-handlerの自動リンクを無効にする必要があります。自動リンクを無効にするには、プロジェクトのルートに次のコンテンツを含むreact-native.config.jsファイルを作成します。

module.exports = {
  dependencies: {
    'react-native-gesture-handler': {
      platforms: {
        Android: null,
        ios: null,
      },
    },
  },
};

React 0.60を使用している場合は、この公式ドキュメントを省略してください。次の手順に従ってください：

  1. rm react-native.config.js存在する場合
  2. react-native link react-native-gesture-handler
  3. cd ios && pod install && cd ..
  4. react-native run-ios
3
BaiJiFeiLong

IosでRN v0.60から同じエラーが表示されます

次は私のために働いた：

cd ios
pod install
2
Cuong Tran Duc

私と同じ問題があるので誰かがここに来るかもしれません。

反応ナビゲーションバージョン3.xを使用しているため、このエラーが発生しました。そのバージョンではstackNavigatorはcreateStackNavigatorに変更され、createAppContainer(createStackNavigator)を使用する必要があります

mr.amiriが言った のように修正しますが、node_moduleを削除しませんimはステップ3-5に従うだけです

2
jemjov

コメントは許可されていないので、ここに投稿しています。これは@Amiri Houssemによる答えですが、私はもう1つ追加しています：

  1. remove node_modules and package-lock.json
  2. npm install
  3. npm install --save react-navigation
  4. npm install --save react-native-gesture-handler
  5. react-native link

これらの5つの手順を実行してもエラーが発生する場合は、Android/settings.gradleを確認し、その行を次のように変更します。

project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/Android')
2
Burim Syla

上記の回答はどれも私に関係ないので、私は答えています。

import { TouchableOpacity } from 'react-native-gesture-handler'要素を追加すると、VSCodeがファイルに依存関係として<TouchableOpacity>を自動的に挿入したため、このエラーが発生しました。

予期しないimportステートメントがある場合に備えて、最後に編集したファイルを1回だけ提供します。

1
James-Prescott

遅いかもしれません。一時的なソリューションは、反応ナビゲーションのバージョンをダウングレードします。
1-反応ナビゲーションとハンドラーのリンク解除とアンインストール
2- add "react-navigation"： "^ 2.18.2" package.jsonに
3- node_modulesフォルダーの削除
4- npm i
5-反応ネイティブリンク

0
Jamal

これは私にとってもうまくいきました。
1）npm install react-navigation
2）npm install react-native-gesture-handler
3）npm intstall
4）react-native link

アプリをアンインストールする

5）react-native run-Android

0
Apurva Aggarwal

コマンドプロンプトで次のコマンドを実行します（管理者として実行）

 npm install react-navigation
 npm install react-native-gesture-handler
 npm intstall
 react-native link

アプリケーションを再インストールすると、問題が解決します。

0
Codemaker

私はこれに苦労しましたが、上記の答えはどれもうまくいきませんでした。ここに私がしなければならなかったことがあります：

  • iosフォルダーを完全に削除します。
  • node_modulesフォルダーとpackage-lock.jsonを削除します。
  • コンピュータを再起動してください。
  • react-native ejectを実行して、ネイティブコードフォルダーを再作成します。
  • npm installを実行します
  • react-native linkを実行します
  • npm run start -- --reset--cacheを実行します
  • react-native run-iosを実行します
0
Eric

IOSでPodfileを使用した構成を使用している場合。次の手順に従ってください：

  • pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'のこの行<react-native-project>/ios/Podfileをコメントします。
  • <react-native-project>.xcworkspaceを開くRNGestureHandler.xcodeprojからライブラリにnode_modules/react-native-gesture-handler/iosを追加します（ライブラリフォルダーを右クリックして[ファイルを追加]を選択します）。
  • （ビルドフェーズ）->（ライブラリとバイナリをリンク）にlibRNGestureHandler.aを追加します。
0
aldajo92

react-native-gesture-handlerはnode_modulesフォルダーにありますが、パスに追加するか、再度インストールする必要があります。次に、ネイティブコードとリンクします。

1）npm install --save react-native-gesture-handler

success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]

2）react-native link

rnpm-install info Linking react-native-gesture-handler ios dependency 
rnpm-install info Platform 'ios' module react-native-gesture-handler has been
 successfully linked 
rnpm-install info Linking react-native-gesture-handler Android dependency 
rnpm-install info Platform 'Android' module react-native-gesture-handler has
 been successfully linked

3）react-native run-Androidまたはreact-native run-ios

0
Harikrishnan

ネイティブのリアクションバージョンを確認します。バージョン0.60の場合、jetifierを使用してandroidXに移行する必要があります。このリンクの手順に従ってください https://github.com/mikehardy/jetifier

私のために成功した:)

0
Bagas

CLIでこれを使用して問題を解決しました

cd iOS
pod install

cd ..
react-native unlink react-native-gesture-handler
0
FSTL