組件加載時間

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 /> : '' 
     } 
    ); 
    } 

    ...... 
}