reagieren nativer Navigator Ansicht rendert nicht

Question

ich eine einfache iOS-App mache mit reagieren-native und einige Probleme mit Navigator mit delcared ich zwei Ansichten bekam aber nichts gemacht, aber eine leere Seite Die meinen Code gefolgt ist:

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

Ich legte console.log() für Debug-Verwendung. Die Debug-Texte werden auf der debug-xcode-dubug-Konsole korrekt angezeigt, die MainMap-Ansicht wird jedoch nicht angezeigt. Ich frage mich, ob dies ein Problem mit meinen Ansichtsstilen ist, aber keine Ahnung nach mehreren Versuchen.

Answer 1

Eine Antwort auf meine Frage Ich verwende justifyContent zwischen vorheriger Szene modal für den Transit zu dieser Szene, und entfernt: ‚flex-End‘, alignItems: ‚Zentrum‘ von der vorherige Szene, in der diese Ansicht gerendert wird .

Answer 2

Versuchen Sie, style={{flex: 1}} zum Navigator hinzuzufügen.

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