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道具下编写代码，方式我认为它的工作原理。