React-Native- RefreshControl && Navigator 使用案例
2023-09-27 14:29:03 时间
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
'use strict'
;
import
React, { Component } from
'react'
;
import
{
AppRegistry,
ScrollView,
StyleSheet,
Text,
View,
RefreshControl,
} from
'react-native'
;
class
ListRowComponent
extends
React.Component{
render(){
return
(
<View style={styles.row}>
<Text style={styles.text}>
{
this
.props.data.text}
</Text>
</View>
);
}
};
class
MyProject
extends
Component {
constructor(props) {
super
(props);
this
.state = {
isRefreshing:
false
,
loaded: 0,
rowData: Array.from(
new
Array(10)).map(
(val, i) => ({text:
'初次加载的数据行 '
+ i})),
};
}
render() {
var
rows =
this
.state.rowData.map((row, indexKey) => {
return
<ListRowComponent key={indexKey} data={row}/>;
});
return
(
<ScrollView style={styles.scrollview} refreshControl={
<RefreshControl
refreshing={
this
.state.isRefreshing}
onRefresh={
this
.onRefresh.bind(
this
)}
//(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
tintColor=
'red'
title= {
this
.state.isRefreshing?
'刷新中....'
:
'下拉刷新'
}
/>
}>
{rows}
</ScrollView>
);
}
onRefresh() {
this
.setState({isRefreshing:
true
});
setTimeout(() => {
// 准备下拉刷新的5条数据
var
rowNewData = Array.from(
new
Array(5))
.map((val, i) => ({
text:
'下拉刷新增加的数据行 '
+ (+
this
.state.loaded + i)
}))
.concat(
this
.state.rowData);
this
.setState({
loaded:
this
.state.loaded + 5,
isRefreshing:
false
,
rowData: rowNewData,
});
}, 2000);
}
}
const styles = StyleSheet.create({
row: {
borderColor:
'green'
,
borderWidth:5,
padding:20,
backgroundColor:
'#3a5795'
,
margin:5,
},
text:{
alignSelf:
'center'
,
color:
'white'
,
},
scrollerview:{
flex:1,
}
});
AppRegistry.registerComponent(
'MyProject'
, () => MyProject);
|
效果演示图:
参考案例
http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Brefreshcontrol%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A321/
'use strict'; import React, { Component } from 'react'; import { AppRegistry, ScrollView, StyleSheet, Text, View, TouchableHighlight, Navigator, } from 'react-native'; class NavButton extends React.Component{ render(){ return( <TouchableHighlight style={styles.button} underlayColor='#b5b5b5' onPress={this.props.onPress}> <Text style={styles.text}>{this.props.text}</Text> </TouchableHighlight> ); } } class NavMenu extends React.Component{ render(){ return( <View style={{flex:1,}}> <Text style={styles.messageText}>{this.props.message}</Text> <NavButton onPress={()=>{this.props.navigator.push({ message:'Push进来的页面', sceneConfig:Navigator.SceneConfigs.FloatFromRight, });}} text='Push到下一级页面' /> <NavButton onPress={() => { this.props.navigator.push({ message: 'Present进来的页面', sceneConfig: Navigator.SceneConfigs.FloatFromBottom, }); }} text="Present到下一级页面" /> <NavButton onPress={() => { this.props.navigator.pop(); }} text="Pop到上一级页面" /> <NavButton onPress={() => { this.props.navigator.popToTop(); }} text="Pop到主页面" /> </View> ); } } class MyProject extends Component { render() { return ( <Navigator style={styles.container} initialRoute={{message:'主页面',}} renderScene={(route,navigator)=><NavMenu message={route.message} navigator={navigator} />} configureScene={(route)=>{ if (route.sceneConfig) { return route.sceneConfig; } return Navigator.SceneConfigs.FloatFromBottom; }}/> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, messageText: { fontSize: 14, fontWeight: '500', padding: 15, marginTop: 50, marginLeft: 15, }, button: { backgroundColor: 'green', padding: 15, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: 'black', }, text:{ fontSize:14, color:'white', }, }); AppRegistry.registerComponent('MyProject', () => MyProject);
效果图:
参考案例:
http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Bnavigator%E7%BB%84%E4%BB%B6%E8%AF%A6%E8%A7%A3%E4%BB%A5%E5%8F%8A%E5%AE%9E%E4%BE%8B23/
相关文章
- C# (初入江湖)-写个时间显示器(项目结构&基本控件&程序的发布与保存)
- 微服务技术系列教程(29) - Dubbo-介绍&环境安装&入门案例
- MySQL: comments & optimizer hints & index hints & optimizer switch
- HUAWEI USG6000系列 & NGFW Module V100R001 典型配置案例
- Python 迭代器 & __iter__方法
- (数据科学学习手札23)决策树分类原理详解&Python与R实现
- iOS开发 - "Cast from pointer to smaller type 'int' loses information” 解决的方法
- PHP团队 编码规范 & 代码样式风格规范
- 【Java I/O 流】文件字节输入输出流:FileInputStream & FileOutputStream(文件读写案例)