晚点加载数据就不显示请问怎么解决?

[lizhuoyuan]

/**

• Sample React Native App
• https://github.com/facebook/react-native
• @flow */

import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; import ViewPager from 'react-native-viewpager'; var IMGS = [ 'https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024', 'https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?h=1024', 'https://images.unsplash.com/photo-1441448770220-76743f9e6af6?h=1024', 'https://images.unsplash.com/photo-1441260038675-7329ab4cc264?h=1024', 'https://images.unsplash.com/photo-1441126270775-739547c8680c?h=1024', 'https://images.unsplash.com/photo-1440964829947-ca3277bd37f8?h=1024', 'https://images.unsplash.com/photo-1440847899694-90043f91c7f9?h=1024' ]; export default class AwesomeProject extends Component {

constructor(props) {
    super(props);
    // 用于构建DataSource对象
    var dataSource = new ViewPager.DataSource({
        pageHasChanged: (p1, p2) => p1 !== p2,
    });
    // 实际的DataSources存放在state中
    this.state = {
        dataSource: dataSource.cloneWithPages([]),
    }
}

componentDidMount() {
    this.setState({
        dataSource: this.state.dataSource.cloneWithPages(IMGS),
    })
}

_renderPage(data, pageID) {
    return (
        <Image
            source={{uri: data}}
            style={styles.page}/>
    );
}

render() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                Welcome to React Native!
            </Text>
            {this.state.dataSource.length > 0 ? <View style={{height: 130}}>
                <ViewPager
                    ref={(viewpager) => {
                        this.viewpager = viewpager
                    }}
                    style={this.props.style}
                    dataSource={this.state.dataSource}
                    renderPage={this._renderPage}
                    isLoop={true}
                    autoPlay={true}/></View> : null}
        </View>
    );
}

}

const styles = StyleSheet.create({ container: { flex: 1, }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, page: { width: 200 flex: 1, height: 130, resizeMode: 'contain' }, });

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

[lizhuoyuan]

我想等网络请求到数据之后再放进去，不知道怎么写，按listview的方式写不会显示

[lizhuoyuan]

`var IMGS = [ 'https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024', 'https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?h=1024', ]; var dataSource; export default class AwesomeProject extends Component {

constructor(props) {
    super(props);
    // 用于构建DataSource对象
    dataSource = new ViewPager.DataSource({
        pageHasChanged: (p1, p2) => p1 !== p2,
    });
    // 实际的DataSources存放在state中
    this.state = {
        dataSource: [],
        data: [],
    }
}

componentDidMount() {
    this.setState({
        dataSource: dataSource.cloneWithPages(IMGS)
    })
}

_renderPage(data, pageID) {
    return (
        <Image
            source={{uri: data}}
            style={styles.page}/>
    );
}

render() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                Welcome to React Native!
            </Text>
            <View style={{height: 130}}>
                <ViewPager
                    ref={(viewpager) => {
                        this.viewpager = viewpager
                    }}
                    style={this.props.style}
                    dataSource={this.state.dataSource}
                    renderPage={this._renderPage}
                    isLoop={true}
                    autoPlay={true}/>
            </View>

        </View>
    );
}

} `

undefined is not an object ('page.IDs.length' )

[LuckyVicky]

为什么用得是cloneWithPages