组件加载时间

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

    ...... 
}