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：＆＃39; flex-end＆＃39;，alignItems：＆＃39; center＆＃39;来自渲染此视图的上一个场景。

Answer 2

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

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

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

2 个答案: