Closed lizhuoyuan closed 7 years ago
我想等网络请求到数据之后再放进去,不知道怎么写,按listview的方式写不会显示
`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' )
为什么用得是cloneWithPages
/**
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 {
}
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);