在上一节介绍tab菜单导航的时候实现了首页,但是首页内容较多的时候滑动页面是没反应的,可以使用ScrollView实现:
引入组件import ScrollView from 'react-native'
import {
View,
Text,
ScrollView,
RefreshControl,
} from 'react-native'ative
render() {
construct(props){
super(props);
this.state = {
isRefreshing: false//控制刷新图标显示与否
}
}
_onRefresh(){//刷新触发事件
this.setState({isRefreshing: true});
setTimeout(() => {
this.setState({isRefreshing: false});
}, 2000)
}
return (
<View Style={styles.container}>
<ScrollView
refreshControl={<RefreshControl//此组件下拉即可触发事件,实现刷新
refreshing={this.state.isRefreshing}//为true则一直显示刷新图标
onRefresh={this._onRefresh.bind(this)}
colors={['red', 'yellow','black']}//刷新圆圈依次并循环展示这些颜色
progressBackgroundColor="#ffffff"//下拉刷新图标背景色
/>}
>
<Text style={{backgroundColor:'pink',height:100}}>首页部分fdfd</Text>
<Text>首页部分fdfd</Text>
<Text style={{backgroundColor:'pink',height:100}}>首页部分fdfd</Text>
<Text>首页部分fdfd</Text>
<Text style={{backgroundColor:'pink',height:100}}>首页部分fdfd</Text>
<Text>首页部分fdfd</Text>
<Text style={{backgroundColor:'pink',height:100}}>首页部分fdfd</Text>
<Text>首页部分fdfd</Text><Text>首页部分fdfd</Text>
<Text>首页部分fdfd</Text>
<Text>首页部分fdfd</Text>
<Text>首页部分fdfd</Text>
<Text>首页部分fdfd</Text><Text>首页部分fdfd</Text>
<Text>首页部分fdfd</Text>
<Text>首页部分fdfd</Text>
<Text>首页部分fdfd</Text>
<Text>首页部分fdfd</Text>
<Text>首页部分fdfd</Text>
</ScrollView>
</View>
)
这样即可实现页面滚动以及下拉刷新了