wake-up-neo.com

Native reagieren - Navigationsproblem "undefined ist kein Objekt (this.props.navigation.navigate)"

Ich folge diesem Tutorial https://reactnavigation.org/docs/intro/ und stoße auf ein paar Probleme.

Ich benutze die Expo Client-App, um meine App jedes Mal zu rendern, und nicht einen Simulator/Emulator.

mein Code ist unten zu sehen. 

Ich hatte ursprünglich die "SimpleApp" -Konstante, die über der "ChatScreen" -Komponente definiert wurde, aber dies gab mir den folgenden Fehler:

Route 'Chat' sollte einen Bildschirm anzeigen. Zum Beispiel: ... etc

also habe ich die Deklaration von SimpleApp direkt über "AppRegistry" verschoben, und es wurde ein neuer Fehler angezeigt 

Der Elementtyp ist ungültig: erwarteter String ..... Sie haben wahrscheinlich vergessen, Ihre Komponente zu exportieren

das Tutorial fügte zu keiner Komponente die Schlüsselwörter "export default" hinzu, was meiner Meinung nach mit der Tatsache zusammenhängt, dass ich es auf der Expo-App laufe? also habe ich "export default" zu "HomeScreen" hinzugefügt und der Fehler ist verschwunden.

Der neue Fehler, den ich nicht loswerden kann (basierend auf dem nachstehenden Code), lautet wie folgt:

undefined ist kein Objekt (wertet 'this.props.navigation.navigate' aus)

Ich kann es nicht loswerden, es sei denn, ich entferne das "{}" um "const {navigate}", aber dadurch wird die Navigation abgebrochen, wenn ich im Startbildschirm auf die Schaltfläche drücke

import React from 'react';
import {AppRegistry,Text,Button} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}



class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
javascriptreactjsreact-nativeexpo
8
user3676224

Mit Expo sollten Sie die App-Registrierung nicht selbst vornehmen. Stattdessen sollten Sie Expo dies tun lassen. Denken Sie daran, dass Sie die Standardkomponente immer exportieren müssen: Außerdem müssen Sie View und Button von React-native importieren unter dem vollständigen Code:

import React from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';

 class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

 class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

const  SimpleAppNavigator = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen }
});

const AppNavigation = () => (
  <SimpleAppNavigator  />
);

export default class App extends React.Component {
  render() {
    return (
        <AppNavigation/>
    );
  }
}
14
Ahmed Khaled A. Mohamed

Zusätzliche Informationen: Wenn Sie untergeordnete Komponenten verschachteln, müssen Sie die Navigation als übergeordnete Komponente in der übergeordneten Komponente . // parent.js <childcomponent navigation={this.props.navigation}/> übergeben.

Und Sie können wie folgt auf die Navigation zugreifen//child.js Geben Sie die Bildbeschreibung hier einthis.props.navigation.navigate('yourcomponent');

Referenz: https://reactnavigation.org/docs/de/connecting-navigation-prop.html

0
Bobur Kobulov