1
votes

Naviguer vers une nouvelle page

Je viens de commencer à travailler avec React Native et je voulais utiliser React Navigator pour accéder à un nouvel écran. J'ai suivi la documentation ici mais je continue de rencontrer un problème.

J'ai un fichier App Navigator ci-dessous

    {
      "name": "AppName",
      "version": "0.0.1",
      "private": true,
      "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
,     "test": "jest"
      },
     "dependencies": {
     "react": "16.6.3",
     "react-native": "0.58.4",
     "react-native-gesture-handler": "^1.0.15",
     "react-navigation": "^3.2.1"
   },
    "devDependencies": {
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
   },
   "jest": {
   "preset": "react-native"
 }

Et mon fichier App.js est

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

<unknown>
GestureHandler.js:55:37
loadModuleImplementation
require.js:321:6
<unknown>
Swipeable.js:11
loadModuleImplementation
require.js:321:6
<unknown>
index.js:1
loadModuleImplementation
require.js:321:6
<unknown>
StackViewLayout.js:19
loadModuleImplementation
require.js:321:6
<unknown>
StackView.js:4
loadModuleImplementation
require.js:321:6
<unknown>
createStackNavigator.js:3
loadModuleImplementation
require.js:321:6
createStackNavigator
index.js:9:18
createStackNavigator
react-navigation.js:107:45
<unknown>
AppNavigator.js:4:21
loadModuleImplementation
require.js:321:6
<unknown>
App.js:13
loadModuleImplementation
require.js:321:6
<unknown>
index.js:7
loadModuleImplementation
require.js:321:6
guardedLoadModule
require.js:199:45
global code
<unknown file>:0

Cependant, je obtenez l'erreur ci-dessous.

    /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import AppNavigator from './AppNavigator';

type Props = {};
export default class App extends Component {
  render() {
    return (
   <AppNavigator/>

   );
  }
}

J'ai aussi essayé

supprimer node_modules et package-lock.json
installation npm
npm install --save react-navigation
npm install --save react-native-gesture-handler
lien natif de réaction

Mais j'obtiens toujours la même erreur. Quelqu'un a des idées?

MODIFIER

Cela se passe dans iOS

MODIFIER p >

Package.json

import { createStackNavigator } from 'react-navigation';
import LandingPage from './src/components/LandingPages/LandingPage';

const AppNavigator = createStackNavigator({
  Home: { screen: LandingPage },
});

export default AppNavigator;

}

react-native

7 commentaires

Où se produit l'erreur? est-ce ios ou android ?

si c'est sous Android, vous avez probablement oublié d'apporter des modifications au fichier MainActivity.java

Cela se passe sous iOS

duplication possible de ceci

Ouais j'ai essayé mais ça n'a pas fonctionné. Je vais réessayer

J'ai essayé à nouveau et cela n'a pas fonctionné. La même erreur

Pouvez-vous montrer votre package.json?

4 Réponses :

0
votes

Si c'est sous Android, assurez-vous d'ajouter ces modifications à MainActivity.java après avoir lié le package check documentation

+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
.
.
.
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }

C'est généralement le problème.

4 commentaires

J'ai ajouté cela à la partie Android mais cela se passe sous iOS

Avez-vous un fichier pod?

Je viens d'en créer un

essayez à nouveau de supprimer node_modules pod install et cela devrait fonctionner, cela se produit tout le temps lorsque vous avez un fichier pod, je continue de supprimer node_modules et je recommence jusqu'à ce que cela fonctionne.

0
votes

Pour Andriod, vous devez apporter des modifications à MainActivity.java Pour iOS Ajoutez ceci à votre podfile:

pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler/ios'

Vous êtes prêt à partir!

0 commentaires

0
votes

J'ai découvert quel était le problème. Je n'utilisais pas correctement StackNavigator et je n'avais pas installé et aligné le GestureHandler correctement.

J'ai créé un nouveau projet, y ai copié mes anciens fichiers et modifié la classe Navigator en tant que telle et cela a commencé à fonctionner correctement.

  import { createStackNavigator, createAppContainer } from 'react-navigation';
  import LandingPage from './components/LandingPage/LandingPage';
  import Login from './components/Login/Login';

 const stack = createStackNavigator({
     Landing: {
         screen: LandingPage,
          navigationOptions:{
             header: null,
         },
     },
     Login: {
         screen: Login,
     },

 });

 const App = createAppContainer(stack); <----- Key emphasis

 export default App;

0 commentaires

0
votes

La cause la plus courante de ce problème n'est pas la reconstruction de l'application. suivez ces étapes

fermez la fenêtre du terminal metro builder
relancez react-native run-ios (ou exécutez-android au cas où vous rencontriez le problème sous Android).

Si cela ne résout pas votre problème

essayez de supprimer l'application de l'appareil.
réexécutez react-native run-ios .

Si vous êtes sur Android et que ce problème n'est toujours pas résolu, vérifiez si votre MainActivity.java correspond à celui fourni dans leurs instructions d'installation.

0 commentaires