react-native Navigator問題

Question

對不起，我收到這個錯誤元素類型是無效的：期望一個字符串（對於內置組件）或一個類/函數（對於複合組件），但得到：undefined.check '航海家'。

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

我後來發現的renderScene的工作方式類似於NavigationRouteMapper，其中對於被引用了各個組件的頁面，如所示above.Had有類似的導航controls.and我的意思是「navigator.push （{}）;」和'navigator.pop（）;'在他們各自的頁面中。爲我工作。加上我擺脫了renderScene.bind（this），並直接在renderScene道具下編寫代碼，方式我認爲它的工作原理。