2016-08-02 32 views
0

Ich habe ein Problem mit dem Navigator in React Native. Ich möchte zu einem anderen Bildschirm navigieren, wenn ich etwas Text drücke, aber ich bekomme einen seltsamen Fehler, ich bin mir nicht sicher, warum.Navigation in React Native

Hier sind meine Code-Blöcke und ein Bild des Fehlers, den ich erhalte.

'use strict' 
 

 
import React, { Component } from 'react'; 
 
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; 
 

 
import ViewContainer from '../components/ViewContainer'; 
 
import StatusBarBackground from '../components/StatusBarBackground'; 
 
import AppNavigator from '../navigation/AppNavigator' 
 

 
import UserIndexScreen from './UserIndexScreen' 
 

 
class LoginIndexScreen extends Component { 
 

 
    render() { 
 
     return (
 
      <ViewContainer> 
 
       <StatusBarBackground /> 
 
       <View style={styles.textContainer}> 
 
        <Text style={styles.loginText}>Welcome to</Text> 
 
        <TouchableOpacity onPress={(event) => this._navigateToUserIndexScreen()}> 
 
         <Text style={styles.nextStep}>Press to go to User Index Screen</Text> 
 
        </TouchableOpacity> 
 
       </View> 
 
      </ViewContainer> 
 
     ); 
 
    } 
 

 
    _navigateToUserIndexScreen() { 
 
     AppNavigator.props.push({ 
 
      ident: "UserIndex" 
 
     }) 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 

 
    textContainer: { 
 
     flex: 1, 
 
     alignItems: 'center', 
 
     backgroundColor: '#F5FCFF', 
 
    }, 
 

 
    loginText: { 
 
     flexDirection: 'row', 
 
     justifyContent: 'center', 
 
     alignItems: 'center', 
 
     marginTop: 30 
 
    }, 
 

 
    nextStep: { 
 
     marginTop: 80 
 
    } 
 

 
}); 
 

 
module.exports = LoginIndexScreen;

Und hier ist der Navigator-Komponente.

'use strict' 
 

 
import React, { Component } from 'react'; 
 
import { Navigator } from 'react-native'; 
 

 
import RegisterIndexScreen from '../screens/RegisterIndexScreen'; 
 
import LoginIndexScreen from '../screens/LoginIndexScreen'; 
 
import UserIndexScreen from '../screens/UserIndexScreen'; 
 
import PersonProfileScreen from '../screens/PersonProfileScreen'; 
 

 
class AppNavigator extends Component { 
 

 
    _renderScene(route, navigator) { 
 
     var globalNavigatorProps = { navigator } 
 

 
     switch(route.ident) { 
 
      case "RegisterIndexScreen": 
 
       return (
 
        <RegisterIndexScreen {...globalNavigatorProps} /> 
 
       ) 
 
      case "LoginIndexScreen": 
 
       return (
 
        <LoginIndexScreen {...globalNavigatorProps} /> 
 
       ) 
 
      case "UserIndex": 
 
       return (
 
        <UserIndexScreen {...globalNavigatorProps} /> 
 
       ) 
 
      case "Temp": 
 
       return (
 
        <Text>Hello</Text> 
 
       ) 
 
      case "PersonProfileScreen": 
 
       return (
 
        <PersonProfileScreen {...globalNavigatorProps} 
 
        person={route.person} /> 
 
       ) 
 
      default: 
 
       return (
 
        <LoginIndexScreen {...globalNavigatorProps} /> 
 
       ) 
 
     } 
 

 
    } 
 

 
    render() { 
 
     return (
 
      <Navigator 
 
       initialRoute={this.props.initialRoute} 
 
       ref="appNavigator" 
 
       renderScene={this._renderScene} 
 
       configureScene={(route) => ({...route.sceneConfig || Navigator.SceneConfigs.FloatFromRight, })} /> 
 
     ); 
 
    } 
 

 
} 
 

 
module.exports = AppNavigator;

hier ist auch ein Bild von der Fehler Ich erhalte:

React Native Error

würde Irgendwelche Ideen sehr geschätzt werden!

Danke!

Antwort

0
  1. Sie versuchen, eine untergeordnete Komponentenmethode in Parent aufzurufen.
  2. Die Methode, die Sie aufrufen möchten, ist kein Teil Ihrer untergeordneten Komponente. Sie rufen die RN Navigator-Methode auf.
  3. Sie sollten das Navigatorobjekt verwenden, das Sie zur Anzeige in der navigator renderScene-Funktion übergeben haben.

Also im Allgemeinen wollen Sie etw. Tun. wie:

In AppNavigator der _renderScene Funktion Pass Navigator Objekt:

<LoginIndexScreen nv={navigator} /> 

Dann in _navigateToUserIndexScreen Funktion Gebrauch übergeben nv Requisiten des LoginIndexScreen:

this.props.nv.push({ ident: "UserIndex" }) 

Sie sollten auch Funktionen binden. Überprüfen Sie https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

+0

Danke für Ihre Hilfe. Ich bin etwas verwirrt mit dem, was Sie meinen, indem Sie das Navigator-Objekt in der Funktion _renderScene übergeben. Ich habe versucht, das in die renderScene-Funktion zu bringen, würde aber einen Fehler treffen. Könnten Sie das etwas weiter erklären? Vielen Dank! – Kaidao

+0

Ihre Renderansicht-Funktion behandelt "was gerade auf dem Display angezeigt wird" (Szenen). In dieser Funktion geben Sie eine Ansicht zurück, die auf dem übergeordneten Stapel der Navigationsrouten basiert. Wenn Sie also LoginIndexScreen zurückgeben, sollten Sie (als Requisiten) eine Instanz des Navigator-Objekts übergeben (damit Sie es in gerenderten Szenen verwenden können). Die Navigator-Instanz ist ein Argument der renderScene-Funktion. – Moonjsit