React Native Navigator 不呈现 initialRoute - 空白屏幕答案

【问题标题】：React Native Navigator does not render initialRoute - blank screenReact Native Navigator 不呈现 initialRoute - 空白屏幕
【发布时间】：2017-02-13 18:51:41
【问题描述】：

我是导航器的新手，所以也许我缺少一些小东西我希望有人能指出。

我的应用在添加 Navigator 之前可以运行。添加基本实现后，我只看到一个空白屏幕，调试器中没有错误。

这是我在 Navigator 之前的应用：

import React, {
  Component, PropTypes
}
from 'react';
import {
  Text, View, Navigator, StyleSheet
}
from 'react-native';

import ReasonSelect from './components/ReasonSelect'
import ShippingDetails from './components/ShippingDetails'
import Confirmation from './components/Confirmation'

export
default class CardReplacement extends Component {
  render() {
      return ( < View > {
            eligibilityLoading &&
              < View style = {
                {
                  marginTop: 30,
                  paddingLeft: 15
                }
              } >
              < Text > Loading... < /Text>
  				</View >
          } {
            !eligibilityLoading &&
              < ReasonSelect / >
          } < /View>
    );
  }
}

这是我添加 Navigator 后的添加（我确实看到此控制台日志有效）：

import React, {
  Component, PropTypes
}
from 'react';
import {
  Text, View, Navigator, StyleSheet
}
from 'react-native';

import ReasonSelect from './components/ReasonSelect'
import ShippingDetails from './components/ShippingDetails'
import Confirmation from './components/Confirmation'

export
default class CardReplacement extends Component {

  renderScene(route, navigator) {
      if (route.name == "Replacement") {
        console.log('working')
        return <ReasonSelect navigator = {
          navigator
        }
        />
    }
    if(route.name == "Shipping"){
      return <ShippingDetails navigator={navigator} / >
      }
      if (route.name == "Confirmation") {
        return <Confirmation navigator = {
          navigator
        }
        />
    }
  }

  render() {
    return (   
			<View>
				{eligibilityLoading &&
  				<View style={{marginTop: 30, paddingLeft: 15}}>
    				<Text>Loading...</Text >
        < /View>}
				{!eligibilityLoading &&
          <Navigator
            style={{ flex:1 }} 
            initialRoute={{name: "Replacement"}}
            renderScene={this.renderScene}
          / >
      } < /View>
    );
  }
}

我尝试进一步简化，但如果我将导航器更改为：

     < Navigator
     style = {
      {
        flex: 1
      }
    }
    initialRoute = {
      {
        name: "Replacement"
      }
    }
    renderScene = {
      (route, navigator) => {
        return <ReasonSelect / >
      }
    }
    />

我错过了什么？

【问题讨论】：

标签： javascript reactjs react-native navigation navigator

【解决方案1】：

所以回答我自己的问题：我的条件 elegibilityLoading 正在引起问题。我需要对此进行重构。但我仍然不确定为什么。我什至无法将 Navigator 包裹在 View 中，否则屏幕将再次变白。很想知道这个的技术原因。

render() {
    if(eligibilityLoading){
      return (
        <View style={{marginTop: 30, paddingLeft: 15}}>
          <Text>Loading...</Text>
        </View>
      )
    }

    return (   
      <Navigator
        style={{ flex:1 }} 
        initialRoute={{name: "Replacement"}}
        renderScene={this.renderScene}
      />
    );
  }
}

【讨论】：

【解决方案2】：

这只是解释为什么您的条件会导致您出现问题：

<View>
  {eligibilityLoading &&
  <View style={{marginTop: 30, paddingLeft: 15}}>
  <Text>Loading...</Text >
< /View>}</View> //Pretty sure this will evaluate to <View>true</View> which is why it's showing a blank screen
          //same logic applies for the !eligibilityLoading part

【讨论】：

但在添加 Navigator 之前，条件按预期工作。当energyLoading == true 时，它会呈现正在加载的文本，当iligibilityLoading == false 时，它会呈现视图组件。