コンポーネントの読み込み時間

Question

私は 'Navigator'を使用してルートごとに複数のコンポーネントをレンダリングしています。ロードに時間がかかるので、コンポーネントにレンダリングする前にローダーを表示したい（イメージやテキストの「Loading ...」など）。私のコードを見直して、どこでローダーを使うべきか教えてください。 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 /> : '' 
     } 
    ); 
    } 

    ...... 
}