reagieren-native Navigator Probleme

Question

Sorry, ich bekomme diese Fehler Elementtyp ist ungültig: erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für Composite-Komponenten), aber: undefined.check die Render-Methode von 'Navigator'.

here's the code; 


import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Navigator, 
    TouchableHighlight 
} from 'react-native'; 

import ButtonPage from './jara/initialpage'; 
import NotePage from'./jara/Notescreen'; 
import HomeScreen from './jara/HomePage'; 

var NavigationBarRouteMapper = { 
    LeftButton(route, navigator, index, navState) { 
    if(index > 0) { 
     return (
     <TouchableHighlight 
      underlayColor="transparent" 
      onPress={() => { if (index > 0) { navigator.pop() } }}> 
      <Text style={ styles.leftNavButtonText }>Back</Text> 
     </TouchableHighlight>   
     ); 
    } 
    else { return null } 
    }, 
    RightButton(route, navigator, index, navState) { 
    if (index <= 0) return (
     <ButtonPage 
     onPress ={() => { 
     navigator.push({ 
     }); 
     }} 
     customText = 'create Note' 
     /> 
     ); 
    }, 
    Title(route, navigator, index, navState) { 
    return (
     <Text style={ styles.title }>Home Page</Text> 
     ); 
    } 
}; 


class NavProject extends Component{ 
    renderScene(route,navigator){ 
     return(
      <route.component navigator = {navigator}/> 
      ); 
      } 
render(){ 
    return(
     <View style = {styles.MainContainer}> 
      <View style = {styles.container}> 
       <ButtonPage/> 
      </View> 

     <Navigator 
      initialRoute ={{page: 'Home'}} 
      renderScene ={this.renderScene.bind(this)} 
      navigationBar ={ 
       <Navigator.NavigationBar 
       routeMapper = {NavigationBarRouteMapper} 
      /> 
      } 
      configScene ={(route,navigator) => 
      Navigator.sceneConfigs.floatFromRight} 
     /> 
     </View>  
    ); 
    } 
} 

class ReactNote extends Component{ 
    renderScene(route,navigator){ 

       if(index <= 0){ 
       return(
        <View style = {styles.container}> 
         <HomeScreen 
         onPress={() =>{ 
         navigator.push({}); 
       }} 
      /> 
        </View>      
        ); 
       } 
     else if(index > 0){ 
      return(
      <View styles ={styles.scontainer}> 
       <NotePage 
       onPress={() =>{ 
       navigator.pop(); 
       }} 
      /> 
        /> 
      </View>  
      ); 
     } 

    } 
} 



const styles = StyleSheet.create({ 
    container:{ 
       flex:1, 
       justifyContent:'center', 
       alignItems:'center', 
    }, 
     container:{ 
     backgroundColor:'blue', 
     flex:1, 
    }, 
    scontainer:{ 
     backgroundColor:'lightblue', 
     flex:1, 
    } 

}); 


AppRegistry.registerComponent('NavProject',()=> NavProject); 

Answer 1

Später fand ich heraus, dass der renderScene funktioniert ähnlich wie die NavigationRouteMapper, wo für die einzelnen Komponentenseiten, auf die verwiesen wurden, wie above.Had gezeigt durch, dass ähnliche Navigation controls.and haben ich meine ‚navigator.push ({}); ' und 'navigator.pop();' auf ihren jeweiligen Seiten. arbeitete für mich.plus Ich habe die renderScene.bind (this) los und schrieb nur den Code direkt unter den renderScene Requisiten entweder, wie ich denke, es funktioniert.