动态数据不起作用页面国家图像滑块

时间:2018-09-10 12:37:28

标签: react-native react-native-image react-native-swiper

我使用远程数据来加载我的代码的图像滑块,但页面国 幻灯片图像转到最后一张幻灯片: 在此代码中使用react-native-swiper但未正确加载,我认为键映射问题

预览:http://awebmaker.ir/2018-09-10_11-56-17.png

import Swiper from 'react-native-swiper';
const Slide = props => {return (<Image style={styles.image} source={{uri: props.uri}} />)};
class SliderComponent extends Component {constructor (props) {
super(props);  
this.state = {
    dataSource: [],
    index: 0
}}
componentDidMount() {

return fetch('http://awebmaker.ir/top_service/Api/Json/getSlider')
    .then((response) => response.json())
    .then((responseJson) => {
        this.setState({
            dataSource: responseJson,
        }, function() {

        });
    })
    .catch((error) => {
});}

render() {
return (
    <View style={styles.container}>
        <Swiper
            height={200} autoplay>
            {
                this.state.dataSource.map((item, index) => <Slide
                    uri={item.image}
                    i={index}
                    key={index} />)                        
            }
        </Swiper>

    </View>
);}

0 个答案:

没有答案