Reagieren Native Navigation - undefined ist kein Objekt

Question

Ich bin neu zu Reagieren native und versuchen, Tutorials zu folgen, aber lernen, kann nicht Navigation zwischen den Bildschirmen zu arbeiten. Ich habe es vorher mit einem Bildschirm gut funktioniert, aber wenn ich Navigation hinzufüge, erhalte ich Fehler.

das Folgende: https://facebook.github.io/react-native/releases/next/docs/navigation.html

Gibt mir Code wie folgt:

import React from 'react'; 
import { 
    StackNavigator, 
} from 'react-navigation'; 

export default class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <Button 
     title="Go to Jane's profile" 
     onPress={() => 
      navigate('Profile', { name: 'Jane' }) 
     } 
     /> 
    ); 
    } 
} 

class ProfileScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Profile', 
    }; 
    render() { 
    return (
     <Button title="do nothing"/> 
    ); 
    } 
} 

const App = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Profile: { screen: ProfileScreen }, 
}); 

Der Versuch, dies zu laufen (über die Expo app) Ergebnisse in der Fehler

undefiniert ist kein Objekt (Bewertung 'this.props.navigation.navigate')

Also mache ich Navigation richtig und wie behebe ich diesen Fehler?

Answer 1

Sie müssen AppRegistry.registerComponent in Ihrer App verwenden. Eine gute Möglichkeit, dies zu tun, ist ein src-Verzeichnis zu erstellen und dann die 2 js-Dateien, HomeScreen und ProfileScreen dort zu erstellen. Dann erstellen Sie und App.js auf der gleichen Ebene wie Ihre index.android.js oder index.ios.js und enthalten Sie diese 2 Dateien und deklarieren Sie den StackNavigator wie in Ihrem Code, aber statt const App müssen Sie haben const NameOfYourApp, wo NameOfYourApp ist, wie Sie Ihr Projekt benannt haben, wenn Sie create-react-native-app. (Wenn es App ist, lassen Sie es einfach so) Dann müssen Sie diese Zeile am Ende hinzufügen, AppRegistry. registerComponent ('NameOfYourApp',() => NameOfYourApp);

import React from 'react'; 
import { 
    StackNavigator, 
} from 'react-navigation'; 
import HomeScreen from './src/HomeScreen' 
import ProfileScreen from './src/ProfileScreen' 

const NameOfYourApp = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Profile: { screen: ProfileScreen }, 
}); 
AppRegistry.registerComponent('NameOfYourApp',() => NameOfYourApp) 

Der letzte Schritt ist Ihre App.js Datei in Ihrem index.android.js zu importieren oder index.ios.js

import './App';