React-Native - 네비게이터가 initialRoute를 렌더링하지 않습니다.

React-Native를 가르치는 과정에서. Firebase에서 데이터를 가져 와서 Navigator를 통합하는 데 걸리는 소매 iOS 사이트의 모형을 제작합니다. 내 응용 프로그램은 'index.ios.js> MainLayout> Routing> HomeIndex'에서 나옵니다. 여기 말했다되는 구성 요소 :React-Native - 네비게이터가 initialRoute를 렌더링하지 않습니다.

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에서 부적절한 것으로 의심 될 수 있습니다. 또는 네비게이터가 어떻게 든 내 componentDidMount 메서드를 사용하지 않는 경우. 어떤 도움을 주시면 감사하겠습니다.

출처

2017-03-22 mcw

그래서 작동하지만 보이지 않습니다. Flex를 사용하여보기 주위에 탐색기를 래핑해야 할 수도 있습니다. 1. –

@MattAft 참으로 View의 Navigator와 View의 HomeIndex 및 ShowPage를 Views의 조건부로 래핑하려고 시도했습니다. 어느 쪽의 접근도 좋지 않은 것처럼 보인다. – mcw

내 문제는 내 MainLayout.js의 <Content> 태그에 내 <Routing /> 구성 요소의 중첩으로 인해 발생했습니다. 그것들을 제거하면 올바르게 렌더링됩니다.

출처

2017-03-23 15:50:03 mcw

React-Native - 네비게이터가 initialRoute를 렌더링하지 않습니다.

답변

관련 문제