Question

我是导航员的新手，所以也许有一些我想知道的小事我希望有人可以指出。

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

这是我在Navigator之前的应用程序：

＆＃13;

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

＆＃13;

这是我添加Navigator后的添加（我确实看到此控制台日志正常工作）：

＆＃13;

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

＆＃13;

我试图简化甚至更多，如果我将导航器改为：

我仍然无法看到任何内容

＆＃13;

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

＆＃13;

我错过了什么？

Answer 1

所以回答我自己的问题：我的条件elegibilityLoading导致了问题。我需要重构这个。但我仍然不确定为什么。我甚至无法在视图中包裹导航器，否则屏幕将再次变为白色。很想知道这个的技术原因。

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 - 空白屏幕

2 个答案: