React-Native -- 导航器不呈现 initialRoute

Question

在自学React-Native的过程中。构建零售 iOS 网站的模型，该网站从 Firebase 中提取数据，但在尝试合并 Navigator 时遇到了障碍。我的应用程序来自 'index.ios.js > MainLayout > Routing > HomeIndex'。以下是所述组件：

MainLayout.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';
import Routing from './Routing';
import HomeIndex from '../pages/HomeIndex';

class MainLayout extends Component {
  render() {
    return (
      <Container>
        <Header>
            <Left>
                <Button transparent>
                </Button>
            </Left>
            <Body>
                <Title>RetailSite</Title>
            </Body>
            <Right />
        </Header>

        <Content>
          <Routing />
        </Content>

        <Footer>
            <FooterTab>
                <Button full>
                    <Text>Footer</Text>
                </Button>
            </FooterTab>
        </Footer>
      </Container>
    );
  }
}

export default MainLayout;

Routing.js

import React, { Component } from 'react';
import { Navigator, View } from 'react-native';
import HomeIndex from '../pages/HomeIndex';
import ShowPage from '../pages/ShowPage';

class Routing extends Component {

  renderScene(route, navigator) {
    if (route.name === 'home') {
      return <HomeIndex navigator={navigator} />
    } else if (route.name === 'show') {
      return <ShowPage navigator={navigator} />
    }
  }

  render() {
    return (
      <Navigator
        initialRoute={{ name: 'home' }}
        renderScene={this.renderScene.bind(this)}
      />
    );
  }
}

export default Routing;

HomeIndex.js

import React, { Component } from 'react';
import { RNRSData } from '../../config/FirebaseConstants';
import { StyleSheet, Text, View, TouchableHighlight, Image, Navigator } from 'react-native';
import styles from '../../../styles.js';

class HomeIndex extends Component {
  constructor(props){
    super(props);
    this.state = {
      allProducts: [],
    }
  }

  componentDidMount() {
    let _this = this;
    let products = {};

    RNRSData.ref('products/').once('value', function(data) {
      data.forEach(function(productNode) {
        let name = productNode.val().name;
        let cost = productNode.val().cost;
        let image = productNode.val().image;
        let idNumber = productNode.key;
        products[name] = {name: name, cost: cost, image: image, id: idNumber}
      })
    }).then(function(product) {
      console.log(product)
      let keys = Object.keys(products).sort();
      let sortedHash = {};
      let sortedArray = [];

      for (let i = 0; i < keys.length; i++) {
        let key = keys[i];
        sortedArray.push(sortedHash[key] = products[key]);
      }

      _this.setState({allProducts: sortedArray}, function afterProductSet() {

      });
    })
  }

  render () {
    let allProducts = this.state.allProducts;
    console.log(allProducts);

    return (
      <View>
        <Text style={styles.homeHeader}>New Arrivals</Text>
        <View style={styles.homeIndexContainer}>
            {allProducts.map(function(object) {
              return (
                <View style={styles.liContainer} key={object.id}>
                    <Image source={{uri: object.image}} style={styles.liImage}>
                    <Text style={styles.liTextName}>{object.name}</Text>
                    <Text style={styles.liTextCost}>${object.cost}</Text>
                    </Image>
                </View>
              )
            })}
        </View>
      </View>
    )
  }
}

export default HomeIndex;

就目前而言，我的模拟器呈现页眉和页脚并点击 HomeIndex 中的 console.log 并在所述 console.log 中显示正确的数据。但它没有在我的模拟器中显示它从 Firebase 中提取的数据。

如果我在 MainLayout.js 中将 <HomeIndex /> 切换为 <Routing />，它会在模拟器中正确显示索引，这让我怀疑这可能是我在搞砸的事情Routing.js。或者，如果 Navigator 以某种方式放弃了我的 componentDidMount 方法。任何帮助将不胜感激。

Answer 1

我的问题源于 <Routing /> 组件嵌套在 MainLayout.js 的 <Content> 标签中。删除了那些并正确呈现。

React-Native -- 导航器不呈现 initialRoute

React-Native -- Navigator not rendering initialRoute

javascript

firebase

reactjs

react-native

native-base