Время загрузки

Question

Я использую «Навигатор» и рендеринг нескольких компонентов по маршруту. Я хочу показать загрузчик (например, любое изображение или текст «Загрузка ...») перед рендерингом на компонент, потому что они требуют времени для загрузки. Просмотрите мой код и предложите мне, где я должен использовать загрузчик. Route.js

import React from 'react'; 
import { 
    Platform, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    ListView, 
    TouchableHighlight, 
    Navigator, 
    TouchableOpacity, InteractionManager 
} from 'react-native'; 

import Home from './Home'; 
import Tomo from './App'; 
import Profile from './Profile'; 

var SCREEN_WIDTH = require('Dimensions').get('window').width; 
var BaseConfig = Navigator.SceneConfigs.FloatFromRight; 
var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, { 
    snapVelocity: 10, 
    edgeHitWidth: SCREEN_WIDTH, 
}); 
var CustomSceneConfig = Object.assign({}, BaseConfig, { 
    springTension: 300, 
    springFriction: 10, 
    gestures: { 
    pop: CustomLeftToRightGesture, 
} 
}); 

export default class Route extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = {renderPlaceholderOnly: true}; 
    } 

    componentDidMount() { 
    InteractionManager.runAfterInteractions(() => { 
     this.setState({renderPlaceholderOnly: false}); 
    }); 
    } 

    _configureScene(route) { 
    return CustomSceneConfig; 
    } 

    render() { 
    if (this.state.renderPlaceholderOnly) { 
     return this._renderPlaceholderView(); 
    } 
    return (
     <Navigator 
      initialRoute={{id: 'Home'}} 
      configureScene={this._configureScene} 
      renderScene={this.navigatorRenderScene} 

     /> 
    ); 
    } 

    _renderPlaceholderView() { 
    return (
     <View> 
     <Text>Loading...</Text> 
     </View> 
    ); 
    } 

    header() { 
    return (
     <View> 
     <Text>Loading...</Text> 
     </View> 
    ); 
    } 

    navigatorRenderScene(route, navigator) { 
    _navigator = navigator; 
    switch (route.id) { 
    case 'Home': 
     return (<Home navigator={navigator} title="Home"/>); 
    case 'Tomo': 
     return (<Tomo navigator={navigator} title="Tomo"/>); 
    case 'Profile': 
     return (<Profile navigator={navigator} title="Profile" />); 
    } 
    } 
} 

Спасибо заранее.

Answer 1

Создайте базовый компонент в качестве контейнера для других компонентов (Home, Tomo, Profile). Этот контейнер также содержит компонент Loading. Таким образом, каждый компонент в этом контейнере будет иметь эффект загрузки. Ключи типа:

class BaseContainer extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     showLoading: true 
    } 
    } 

    render() { 
    ...... 

    return (
     {this.props.children} 
     { 
     this.state.showLoading ? <Loading /> : '' 
     } 
    ); 
    } 

    ...... 
}