react-native Navigator问题

时间:2017-02-20 09:39:46

标签: react-native

抱歉,我得到的错误元素类型无效:期望一个字符串(用于内置组件)或类/函数(用于复合组件)但得到:undefined.check'Navigator'的render方法。< / p>

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);

1 个答案:

答案 0 :(得分:0)

我后来发现renderScene与NavigationRouteMapper的工作方式类似,其中对于引用的各个组件页面,如上所示。有类似的导航控件。我的意思是'navigator.push({}) ;”和'navigator.pop();'在各自的页面中。为me.plus工作我摆脱了renderScene.bind(这个),只是直接在renderScene道具下编写代码,我认为它的工作原理。