react-navigationの使用する巨大な穴

react-navigationの使用する巨大な穴

このライブラリのインストールは成功して長い間行われていたので,心理状態が崩れてしまった.こんな基本的な質問をするのは恥ずかしくて、自分で少ししかできませんが、終わったら自信が高まりますね.この兄は私と同じように、ははは、同じ道の中の人に出会った.

インストールコマンド

npm install react-navigation --save

コマンドを実行すると、最新バージョンが自動的にインストールされます.

"react-navigation": "^3.6.1"

このバージョンに注意してください.高バージョンで低バージョンの書き方を使用すると、次のような関数エラーが表示されます.

undefined is not a function (evaluating'_reactNavigation.StackNavigator....')

インストールバージョンが間違っていると思ったら、アンインストールして再インストールできます.

npm uninstall react-navigation --save

再インストール時にバージョンインストールを指定できます.
ネット上の多くは1.+のバージョンで、使用方法は次のとおりです.

import {StackNavigator} from 'react-navigation';
const HomeScreen = () => (
    
      Home Screen
    
);

const DetailScreen = () => (
    
      Detail Screen
    
);

const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen
  },
  Detail: {
    screen: DetailScreen
  }
});

export default RootNavigator;

2.+をインポートした場合または3.+のバッグを使用して、この方法を使用すると、上のエラーが表示されます.正しい書き方は公式文書を参照してください.3.+の書き方は以下の通りです.

import React, { Component } from 'react'
import { View, Button, Platform, Text } from 'react-native'
import { createStackNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      
        Home Screen
         this.props.navigation.navigate('Details')}
        />
      
    );
  }
}


class DetailsScreen extends React.Component {
  render() {
    return (
      
        Details Screen
         this.props.navigation.navigate('Home')}
        />
      
    );
  }
}


const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  Details: {
    screen: DetailsScreen
  }
});

export default createAppContainer(AppNavigator);

直接実行するとエラーが発生し、nodeウィンドウで'react-native-gesture-handler'モジュールをロードできないことを示すメッセージが表示されるので、ジェスチャーライブラリをインストールする必要があります。

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

       （link）  ，     android            ：

react-native link react-native-gesture-handler

Nodeを閉じ、nodeサーバを再起動し、再実行してもエラーが発生します.

null is not an object(evaluating 'RNGestureHandlerModule.Direction')

この場所は時にはこの間違いを報告しないことがあります.彼は時にはこのような間違いを報告します.

Module RCTNativeAppEventEmitter is not a registered callable module

   

Module RCTeventemitter is not a registered callable module

RCTeventemitterは登録できるモジュールではなく、意味が全く分かりません.googleは長い間資料を持っていて、霧がかかっていて、このライブラリの使用とは関係のない答えでした.その後、仕方なく、携帯電話で元のプログラムをアンインストールし、シミュレータを再起動し、項目を再起動し、nodeサーバーを再起動しました.再起動が完了したら、react-native run-androidを再起動し、ついにエラーを報告しました.

null is not an object(evaluating 'RNGestureHandlerModule.Direction')

だから、変なエラーがあって、再起動すればいいのに、元のapkをアンインストールして、jsファイルがエラーを報告した後にキャッシュファイルがきれいにクリアされていないかもしれません.
この場合、公式ドキュメントを表示するには、ReactRootViewインスタンスの作成を担当するメソッドを上書きするために、MainActivityファイルにコードを追加して手動でインポートする必要があります.その後、このライブラリで提供されているルートビューパッケージを使用します.(このバグを解決するのに役立つかどうかは不明ですが、書き終わったら実行に成功し、実行に成功してからこれらのコードを閉じても実行に成功します):

//    	
 import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

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

実行に成功し、このコードを隠して実行し、実行を続け、開始のエラーを報告しなかったのは不思議だ.
私の簡書の住所