javascript - react native 导航器 View 不呈现

Question

我正在使用 react-native 制作一个简单的 iOS 应用程序，并且在使用导航器时遇到了一些问题我创建了两个 View ，但除了一个空白页面之外什么也没有呈现以下是我的代码:

'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 调试控制台上正确显示，但未显示 MainMap View 。我想知道这是否是我的 View 样式的问题，但在多次尝试后没有任何线索。

Answer 1

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