react本机导航器视图不呈现

我正在使用react native制作一个简单的iOS应用程序，导航器出现了一些问题下面是我的代码：

'use strict';
var Dimensions = require('Dimensions');
import React, {
  Component,
  StyleSheet,
  MapView,
  Text,
  View,
  Animated,
  Navigator,
  TouchableHighlight,
  TouchableOpacity,
  Image,
  PropTypes,
  Modal
} from 'react-native';
var {
  height: deviceHeight,
  width: deviceWidth
} = Dimensions.get('window');
var BasicConfig = Navigator.SceneConfigs.FloatFromLeft;
var CustomLeftToRightGesture = Object.assign({}, BasicConfig.gestures.pop, {
  snapVelocity:8,
  edgeHitWidth: deviceWidth,
});

var CustomSceneConfig = Object.assign({}, BasicConfig, {
  springTension: 100,
  springFriction: 1,
  gestures:{
    pop:CustomLeftToRightGesture,
  }
});
var MainMap = React.createClass({
  watchID: (null: ?number),
  getInitialState: function() {
    return {
      latitude: 0,
      longitude: 0,
      initialPosition: 'unknown',
      lastPosition: 'unknown',
    };
  },
  openMenu(){
    this.props.navigator.push({id: 2,});
  },
  render: function(){
      console.log("123456")
      return (
      <View style = {styles.container}>
        <View style = {styles.TopBarContainer}>
          <TouchableOpacity style={styles.toolbarButton}
              onPress={this.openMenu}>
              <Text style={styles.toolbarButtonText}>{"MENU"}</Text>
          </TouchableOpacity>
          <Text style={styles.toolbarTitle}>{"Simply Park"}</Text>
          <TouchableOpacity style={styles.toolbarButton}
              onPress={this.openSeacrh}>
              <Image source={require('image!search')} style={styles.toolbarSeacrhImage}/>
          </TouchableOpacity>
        </View>
        <MapView
            style={styles.map}
            showsUserLocation={true}
            followUserLocation={true}
        />
      </View>
      );
  }
});

var ControlPanel = React.createClass({
  _handlePress(){
    this.props.navigator.pop();
  },
  render: function() {
    console.log("paaaaaaaaanel")
    return (
      <View style={styles.container}>
        <Text style={styles.controlText}>{"Control Panel"}</Text>
        <TouchableOpacity style={styles.button} onPress={this._handlePress}>
          <Text>{"Close Drawer"}</Text>
        </TouchableOpacity>
      </View>
    )
  }
});
var Main = React.createClass({
  _renderScene(route, navigator){
    if (route.id === 2){
      console.log("id is 2");
      return <ControlPanel navigator={navigator} />
    }else{
      console.log("id is 1");
      return <MainMap navigator={navigator} />
    }
  },
  _configureScene(route){
    return CustomSceneConfig;
  },
  render(){
    console.log("hihihihihihi");
    return(
    <Navigator
      initialRoute={{
        id: 1,
      }}
      renderScene = {this._renderScene}
      configureScene = {this._configureScene}
    />
  );
  }
});

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  TopBarContainer:{
    position: 'absolute',
    backgroundColor: '#3b5998',
    top: 0,
    left: 0,
    right: 0,
    bottom: 580,
    flexDirection:'row'
  },
  toolbarButton:{
    paddingTop:35,
    paddingLeft: 7,
    width: 50,
    alignItems:'center'
  },
  toolbarButtonText:{
    paddingTop: 5,
    color:'#fff',
    fontWeight: 'normal',
    fontSize: 13,   
  },
  toolbarTitle:{
    paddingTop:35,
    color:'#fff',
    textAlign:'center',
    fontWeight:'bold',
    fontSize: 18,
    flex:1,
  },
  toolbarSeacrhImage:{
    paddingTop: 20,
    width: 18,
    height:18,
  },
  map: {
    position: 'absolute',
    top: 70,
    left: 0,
    right: 0,
    bottom: 0,
  },
  controlText: {
    color: 'white',
  },
  button: {
    backgroundColor: 'white',
    borderWidth: 1,
    borderColor: 'black',
    padding: 10,
    bottom: 500,
  },
});
module.exports = Main;

我将console.log（）用于调试。调试文本在调试xcode dubug控制台上正确显示，但MainMap视图不会显示。我想知道这是否是我的观点风格的问题，但几次尝试后都没有线索。