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

Question

我是 navigator 的新手，所以也许我遗漏了一些小东西，希望有人能指出。

我的应用程序在添加 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 更改为：

，我仍然看不到任何东西

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

我错过了什么？

Answer 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}
      />
    );
  }
}

Answer 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

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

React Native Navigator does not render initialRoute - blank screen

javascript

navigation

navigator

reactjs

react-native