反應本地導航視圖不會呈現

Question

我正在使用反應原生一個簡單的iOS應用程序，有一些問題航海家我delcared兩種觀點，但一無所獲渲染，但一個空白頁 的跟隨是我的代碼：

'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：「柔性結束」，alignItems：從以前的場面，這一觀點被渲染的「中心」

Answer 2

嘗試將style={{flex: 1}}添加到導航器中。

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