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

Posted 2023-03-14

【中文标题】反应本机导航器视图不呈现

【英文标题】：react native navigator view does not render

【发布时间】：2016-04-21 03:07:08

【问题描述】：

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

【参考方案1】：

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

【参考方案2】：

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

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

【讨论】：

我试过了，但似乎不起作用，仍然有空白页

你的容器上的一些有趣的样式，有绝对定位的原因吗？另外，您是否尝试过不使用地图视图进行渲染以查看是否显示任何内容？

是的，如果我不使用绝对定位，地图视图将无法正确呈现。但我自己找到了解决方案