反应本机导航器视图不呈现

Question

我正在使用 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 视图。我想知道这是否是我的视图样式的问题，但经过多次尝试后没有任何线索。

Answer 1

我的问题的一个答案是我正在使用模态在前一个场景到这个场景之间进行转换，并从渲染这个视图的前一个场景中删除了 justifyContent: 'flex-end', alignItems: 'center'。

Answer 2

尝试将style={{flex: 1}} 添加到导航器。

<Navigator
  style={{ flex: 1 }}
  initialRoute={{
    id: 1,
  }}
  renderScene = {this._renderScene}
  configureScene = {this._configureScene}
/>