React-native之react-native-swiper动态赋值
在实际开发中, 经常会遇到轮播图, 轮播图的数据通常情况下都是⽹络获取的. 这⾥简单的记录⼀下接⼝获取轮播图数据, 然后动态赋值给swiper.
轮播图组件是通过 react-native-swiper 实现, 这⾥不再多说.
直接源码说明:
export default class MainPage extends Component {
static navigationOptions = {
headerTitle: '⾸页',
};
constructor(props) {
super(props);
this.state = {
bannerData: null,
}
};
componentDidMount() {
this.fetchData();
}
render() {
return (
<View style={ainer}>
<ScrollView style={ainer}>
<View style={le_view}>
{
this.state.bannerData == null ?
<View style={styles.slide}/>
:
<Swiper
style={styles.swiper}
height={width/720*407}
loop={true}
autoplay={true}
autoplayTimeout={3}
horizontal={true}
paginationStyle={{bottom: 10}}
showsPagination={false}>
{derSwiper()}
</Swiper>
}
</View>
</ScrollView>
</View>
);
};
//请求数据
fetchData() {
<('你的接⼝ url地址',null,null).then((response) => {
this.setState({
bannerData: response['data']
})
}, (error) => {
Alert.alert('error')
})
};
// 渲染
renderSwiper(){
var itemArr = [];
for(var i = 0; i < this.state.bannerData.length; i++) {
let data = this.state.bannerData[i];
itemArr.push(
<TouchableOpacity key={i}>
<Image source={{uri: data['imagePath']}} style={styles.swiper_image} />                </TouchableOpacity>
);
}
return itemArr;
}
}
const styles = ate({
container: {
backgroundColor: color.view_background,
flex: 1,
},
cycle_view: {
height: width/720*407,reactnative开发
},
slide: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB',
},
swiper: {
},
swiper_image: {
height: width/720*407,
},
});
其实很简单, 就是通过请求的数据来动态的创建每⼀个 swiperItem !
react-native ⼩⽩交流: 860196537 或者 234713941
enjoy it!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。