React-Native 之项目实战(三)

最新推荐文章于 2019-07-08 12:11:12 发布

barnett_y

最新推荐文章于 2019-07-08 12:11:12 发布

阅读量863

点赞数

分类专栏：【React-Native点滴知识】

【React-Native点滴知识】专栏收录该内容

137 篇文章 2 订阅

订阅专栏

本文有配套视频，可以酌情观看。
文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我。
文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关。
如文中内容对您造成不便，烦请联系 277511806@qq.com 处理，谢谢。
转载麻烦注明出处，谢谢。

本篇资源：链接: https://pan.baidu.com/s/1jIbW2n8 密码: wqe4

从这篇开始我们就将源码托管到 github 上，需要源码的点我下载，喜欢的话记得点下星星，谢谢！

Android启动页面

从上面的效果可以看出，安卓端还没有启动页面，这边我们就通过React-Native 的方式解决。

思路：新建一个组件作为 Android 的启动页，index.android.js 的初始化窗口改为 Android启动页，设置定时器，使其在1.5秒后自动跳转到 Main 组件。


    export default class GDLaunchPage extends Component {

        componentDidMount() {
            setTimeout(() => {
                this.props.navigator.replace({
                    component:Main
                })
            }, 1500)
        }

        render() {
            return(
                <Image source={{uri:'launchimage'}} style={styles.imageStyle} />
            );
        }
    }

   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Android启动页面.gif

git使用

项目的版本管理也是程序猿必须具备的一项技能，它能够让我们避免许多开发中遇到的尴尬问题。
公司里面一般使用 SVN 和 Git 两种，而现在 Git 的份额逐渐在蚕食着 SVN，这边我给大家提供了 SVN 和 Git 的详情版，大家可以前往阅读。
- svn介绍与使用
- git介绍与使用
这小结建议观看视频，视频内有具体操作！

错误修正 —— 模态

以前看官方文档竟然没有发现 React-Native 提供了 model 组件，在这里给大家道个歉，以后跪着写教程，不用让我起来，反正我感觉膝盖软软的！
前几天在看官方文档的时候，无意中看见 model 组件，我嘞个天，有这东西就可以减少开发中很多功能开发难度。当初怎么没发现，还傻傻地一步一步去封装这个东西 T^T，在这告诫各位，不能太粗心！
这边我们就将原本近半小时热门这个模块的跳转模式改成正宗的模态，代码如下：

    render() {
        return (
            <View style={styles.container}>
                {/* 初始化模态 */}
                <Modal
                    animationType='slide'
                    transparent={false}
                    visible={this.state.isModal}
                    onRequestClose={() => this.onRequestClose()}
                >
                    <Navigator
                        initialRoute={{
                            name:'halfHourHot',
                            component:HalfHourHot
                        }}

                        renderScene={(route, navigator) => {
                            let Component = route.component;
                            return <Component
                                removeModal={(data) => this.closeModal(data)}
                                {...route.params}
                                navigator={navigator} />
                        }} />
                </Modal>

                {/* 导航栏样式 */}
                <CommunalNavBar
                    leftItem = {() => this.renderLeftItem()}
                    titleItem = {() => this.renderTitleItem()}
                    rightItem = {() => this.renderRightItem()}
                />

                {/* 根据网络状态决定是否渲染 listview */}
                {this.renderListView()}
            </View>
        );
    }

 
 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
 
 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

注：这边需要注意一下逆向传值的方式，这里用到最基本的逐层传值，类似于 block 的功能，具体的代码参考 Demo , Demo 下载地址在上面。

模态跳转.gif

关于更详细地 model 使用，可以参照官方文档 model ，当然我也给各位上了这道菜 —— React-Native 之 model介绍与使用。
通过查看 modal 的源码，我们不难发现 —— 其实 modal 实现原理也只是使用了绝对定位，所以如果 modal 无法满足我们的功能，我们可以使用绝对定位来自己实现一下类似功能。

加载更多功能完善

这边我们来完善一下加载更多功能数据的加载，需要注意的一点就是，拼接数组需要使用 concat 方法来拼接，它会返回一个新的数组给我们使用，而不修改传入的数组。
这边我们加载数据的方法分为 2 个，代码看起来重复性很高，但是其实这就取决于我们的需求了，我们分为 2 个的好处是看起来更清晰，减少沟通成本，想象一下，如果我们把所有逻辑都放到同一个方法内，那么是不是这个方法内的逻辑是不是特别复杂，不方便后期维护？！所以这就是为什么分为 2 个方法进行加载的原因。

那来看一下加载最新数据这边逻辑：

    // 加载最新数据网络请求
    loadData(resolve) {

        let params = {"count" : 10 };

        HTTPBase.get('https://guangdiu.com/api/getlist.php', params)
            .then((responseData) => {

                // 清空数组
                this.data = [];

                // 拼接数据
                this.data = this.data.concat(responseData.data);

                // 重新渲染
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(this.data),
                    loaded:true,
                });

                // 关闭刷新动画
                if (resolve !== undefined){
                    setTimeout(() => {
                        resolve();
                    }, 1000);
                }

                // 存储数组中最后一个元素的id
                let cnlastID = responseData.data[responseData.data.length - 1].id;
                AsyncStorage.setItem('cnlastID', cnlastID.toString());

            })
            .catch((error) => {

            })
    }
   
   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
   
   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

再来看下加载更多这边的逻辑：

加载更多需要在获取最新数据的时候将数组中 最后一个元素 内的ID保存起来，因为不是大批量数据存储，这边我们就使用 AsyncStorage进行 id 的存储。
接着，我们拼接请求参数。


    // 加载更多数据的网络请求
    loadMoreData(value) {

        let params = {
            "count" : 10,
            "sinceid" : value
        };

        HTTPBase.get('https://guangdiu.com/api/getlist.php', params)
            .then((responseData) => {

                // 拼接数据
                this.data = this.data.concat(responseData.data);

                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(this.data),
                    loaded:true,
                });

                // 存储数组中最后一个元素的id
                let cnlastID = responseData.data[responseData.data.length - 1].id;
                AsyncStorage.setItem('cnlastID', cnlastID.toString());
            })
            .catch((error) => {

            })
    }
   
   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
   
   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

加载更多.gif

Cell 点击实现

我们回到主页这边来实现以下 cell 的点击，需要注意的是对 row 进行绑定操作，不然会找不到当前的 this。
```
    // 绑定
    renderRow={this.renderRow.bind(this)}
   
   1
2
   
   1
2
```

接着来看下 renderRow 方法实现：

    // 返回每一行cell的样式
    renderRow(rowData) {
        return(
            <TouchableOpacity
                onPress={() => this.pushToDetail(rowData.id)}
            >
                <CommunalHotCell
                    image={rowData.image}
                    title={rowData.title}
                />
            </TouchableOpacity>
        );
    }
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
   
   1
2
3
4
5
6
7
8
9
10
11
12
13

再来看下 pushToDetail 方法实现，params意思就是将 url 参数传递到 CommunalDetail 组件：

    // 跳转到详情页
    pushToDetail(value) {
        this.props.navigator.push({
            component:CommunalDetail,
            params: {
                url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value
            }
        })
    }
   
   1
2
3
4
5
6
7
8
9
   
   1
2
3
4
5
6
7
8
9

详情页

既然我们已经保存了 id 那么就可以来做详情页了，当我们点击 cell 的时候，需要跳转到对应的详情页。
这边服务器返回给我们的是个网页数据，我们这边就直接使用 webView组件 展示，具体使用我们就不多做介绍了，很简单，详情就参考官方文档WebView。

先来看详情页的实现：

    export default class GDCommunalDetail extends Component {

        static propTypes = {
            url:PropTypes.string,
        };

        // 返回
        pop() {
            this.props.navigator.pop();
        }

        // 返回左边按钮
        renderLeftItem() {
            return(
                <TouchableOpacity
                    onPress={() => {this.pop()}}
                >
                    <Text>返回</Text>
                </TouchableOpacity>
            );
        }

        componentWillMount() {
            // 发送通知
            DeviceEventEmitter.emit('isHiddenTabBar', true);
        }

        componentWillUnmount() {
            // 发送通知
            DeviceEventEmitter.emit('isHiddenTabBar', false);
        }

        render() {
            return(
                <View style={styles.container}>
                    {/* 导航栏 */}
                    <CommunalNavBar
                        leftItem = {() => this.renderLeftItem()}
                    />

                    {/* 初始化WebView */}
                    <WebView
                        style={styles.webViewStyle}
                        source={{url:this.props.url, method: 'GET' }}
                        javaScriptEnabled={true}
                        domStorageEnabled={true}
                        scalesPageToFit={false}
                    />
                </View>
            );
        }
    }

    const styles = StyleSheet.create({
        container: {
            flex:1
        },

        webViewStyle: {
            flex:1
        }
    });
   
   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
   
   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

按照上面的方法，我们完成一下近半小时热门模块的跳转详情功能。

详情页.gif

海淘半小时热门

和近半小时热门效果是一样的，只是请求参数变了，所以 Copy 然后修改下相应参数啊：

    export default class GDUSHalfHourHot extends Component {

        // 构造
        constructor(props) {
            super(props);
            // 初始状态
            this.state = {
                dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}),
                loaded:true,
            };
            this.fetchData = this.fetchData.bind(this);
        }

        static defaultProps = {
            removeModal:{}
        }

        // 网络请求
        fetchData(resolve) {
            let params = {
                "c" : "us"
            };

            HTTPBase.get('http://guangdiu.com/api/gethots.php', params)
                .then((responseData) => {
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(responseData.data),
                        loaded:true,
                    });
                    if (resolve !== undefined){
                        setTimeout(() => {
                            resolve();  // 关闭动画
                        }, 1000);
                    }
                })
                .catch((error) => {

                })
        }

        popToHome(data) {
            this.props.removeModal(data);
        }

        // 返回中间按钮
        renderTitleItem() {
            return(
                <Text style={styles.navbarTitleItemStyle}>近半小时热门</Text>
            );
        }

        // 返回右边按钮
        renderRightItem() {
            return(
                <TouchableOpacity
                    onPress={()=>{this.popToHome(false)}}
                >
                    <Text style={styles.navbarRightItemStyle}>关闭</Text>
                </TouchableOpacity>
            );
        }

        // 根据网络状态决定是否渲染 listview
        renderListView() {
            if (this.state.loaded === false) {
                return(
                    <NoDataView />
                );
            }else {
                return(
                    <PullList
                        onPullRelease={(resolve) => this.fetchData(resolve)}
                        dataSource={this.state.dataSource}
                        renderRow={this.renderRow.bind(this)}
                        showsHorizontalScrollIndicator={false}
                        style={styles.listViewStyle}
                        initialListSize={5}
                        renderHeader={this.renderHeader}
                    />
                );
            }
        }

        // 返回 listview 头部
        renderHeader() {
            return (
                <View style={styles.headerPromptStyle}>
                    <Text>根据每条折扣的点击进行统计,每5分钟更新一次</Text>
                </View>
            );
        }

        // 跳转到详情页
        pushToDetail(value) {
            this.props.navigator.push({
                component:CommunalDetail,
                params: {
                    url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value
                }
            })
        }

        // 返回每一行cell的样式
        renderRow(rowData) {
            return(
                <TouchableOpacity
                    onPress={() => this.pushToDetail(rowData.id)}
                >
                    <CommunalHotCell
                        image={rowData.image}
                        title={rowData.title}
                    />
                </TouchableOpacity>
            );
        }

        componentWillMount() {
            // 发送通知
            DeviceEventEmitter.emit('isHiddenTabBar', true);
        }

        componentWillUnmount() {
            // 发送通知
            DeviceEventEmitter.emit('isHiddenTabBar', false);
        }

        componentDidMount() {
            this.fetchData();
        }

        render() {
            return (
                <View style={styles.container}>
                    {/* 导航栏样式 */}
                    <CommunalNavBar
                        titleItem = {() => this.renderTitleItem()}
                        rightItem = {() => this.renderRightItem()}
                    />

                    {/* 根据网络状态决定是否渲染 listview */}
                    {this.renderListView()}
                </View>
            );
        }
    }

    const styles = StyleSheet.create({
        container: {
            flex:1,
            alignItems: 'center',
        },

        navbarTitleItemStyle: {
            fontSize:17,
            color:'black',
            marginLeft:50
        },
        navbarRightItemStyle: {
            fontSize:17,
            color:'rgba(123,178,114,1.0)',
            marginRight:15
        },

        listViewStyle: {
            width:width,
        },

        headerPromptStyle: {
            height:44,
            width:width,
            backgroundColor:'rgba(239,239,239,0.5)',
            justifyContent:'center',
            alignItems:'center'
        }
    });

   
   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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
   
   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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

海淘半小时热门.gif

海淘模块

我们可以发现海淘这一块和首页是类似的，只是数据请求参数不同，所以我们还是 Copy 一下代码，然后将请求参数改为如下：

    export default class GDHome extends Component {

        // 构造
        constructor(props) {
            super(props);
            // 初始状态
            this.state = {
                dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}),
                loaded:false,
                isModal:false
            };

            this.data = [];
            this.loadData = this.loadData.bind(this);
            this.loadMore = this.loadMore.bind(this);
        }

        // 加载最新数据网络请求
        loadData(resolve) {

            let params = {
                "count" : 10,
                "country" : "us"
            };

            HTTPBase.get('https://guangdiu.com/api/getlist.php', params)
                .then((responseData) => {

                    // 拼接数据
                    this.data = this.data.concat(responseData.data);

                    // 重新渲染
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(this.data),
                        loaded:true,
                    });

                    // 关闭刷新动画
                    if (resolve !== undefined){
                        setTimeout(() => {
                            resolve();
                        }, 1000);
                    }

                    // 存储数组中最后一个元素的id
                    let uslastID = responseData.data[responseData.data.length - 1].id;
                    AsyncStorage.setItem('uslastID', uslastID.toString());
                })
                .catch((error) => {

                })
        }

        // 加载更多数据的网络请求
        loadMoreData(value) {

            let params = {
                "count" : 10,
                "sinceid" : value,
                "country" : "us"
            };

            HTTPBase.get('https://guangdiu.com/api/getlist.php', params)
                .then((responseData) => {

                    // 拼接数据
                    this.data = this.data.concat(responseData.data);

                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(this.data),
                        loaded:true,
                    });

                    // 存储数组中最后一个元素的id
                    let uslastID = responseData.data[responseData.data.length - 1].id;
                    AsyncStorage.setItem('uslastID', uslastID.toString());

                })
                .catch((error) => {

                })
        }

        // 加载更多数据操作
        loadMore() {
            // 读取id
            AsyncStorage.getItem('uslastID')
                .then((value) => {
                    // 数据加载操作
                    this.loadMoreData(value);
                })

        }

        // 模态到近半小时热门
        pushToHalfHourHot() {
            this.setState({
                isModal:true
            })
        }

        // 跳转到搜索
        pushToSearch() {
            this.props.navigator.push({
                component:Search,
            })
        }

        // 安卓模态销毁处理
        onRequestClose() {
            this.setState({
                isModal:false
            })
        }

        // 关闭模态
        closeModal(data) {
            this.setState({
                isModal:data
            })
        }

        // 返回左边按钮
        renderLeftItem() {
            return(
                <TouchableOpacity
                    onPress={() => {this.pushToHalfHourHot()}}
                >
                    <Image source={{uri:'hot_icon_20x20'}} style={styles.navbarLeftItemStyle} />
                </TouchableOpacity>
            );
        }

        // 返回中间按钮
        renderTitleItem() {
            return(
                <TouchableOpacity>
                    <Image source={{uri:'navtitle_home_down_66x20'}} style={styles.navbarTitleItemStyle} />
                </TouchableOpacity>
            );
        }

        // 返回右边按钮
        renderRightItem() {
            return(
                <TouchableOpacity
                    onPress={()=>{this.pushToSearch()}}
                >
                    <Image source={{uri:'search_icon_20x20'}} style={styles.navbarRightItemStyle} />
                </TouchableOpacity>
            );
        }

        // ListView尾部
        renderFooter() {
            return (
                <View style={{height: 100}}>
                    <ActivityIndicator />
                </View>
            );
        }

        // 根据网络状态决定是否渲染 listview
        renderListView() {
            if (this.state.loaded === false) {
                return(
                    <NoDataView />
                );
            }else {
                return(
                    <PullList
                        onPullRelease={(resolve) => this.loadData(resolve)}
                        dataSource={this.state.dataSource}
                        renderRow={this.renderRow.bind(this)}
                        showsHorizontalScrollIndicator={false}
                        style={styles.listViewStyle}
                        initialListSize={5}
                        renderHeader={this.renderHeader}
                        onEndReached={this.loadMore}
                        onEndReachedThreshold={60}
                        renderFooter={this.renderFooter}
                    />
                );
            }
        }

        // 跳转到详情页
        pushToDetail(value) {
            this.props.navigator.push({
                component:CommunalDetail,
                params: {
                    url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value
                }
            })
        }

        // 返回每一行cell的样式
        renderRow(rowData) {
            return(
                <TouchableOpacity
                    onPress={() => this.pushToDetail(rowData.id)}
                >
                    <CommunalHotCell
                        image={rowData.image}
                        title={rowData.title}
                    />
                </TouchableOpacity>
            );
        }

        componentDidMount() {
            this.loadData();
        }

        render() {
            return (
                <View style={styles.container}>
                    {/* 初始化模态 */}
                    <Modal
                        animationType='slide'
                        transparent={false}
                        visible={this.state.isModal}
                        onRequestClose={() => this.onRequestClose()}
                    >
                        <Navigator
                            initialRoute={{
                                name:'halfHourHot',
                                component:USHalfHourHot
                            }}

                            renderScene={(route, navigator) => {
                                let Component = route.component;
                                return <Component
                                    removeModal={(data) => this.closeModal(data)}
                                    {...route.params}
                                    navigator={navigator} />
                            }} />
                    </Modal>

                    {/* 导航栏样式 */}
                    <CommunalNavBar
                        leftItem = {() => this.renderLeftItem()}
                        titleItem = {() => this.renderTitleItem()}
                        rightItem = {() => this.renderRightItem()}
                    />

                    {/* 根据网络状态决定是否渲染 listview */}
                    {this.renderListView()}
                </View>
            );
        }
    }

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'center',
            backgroundColor: 'white',
        },

        navbarLeftItemStyle: {
            width:20,
            height:20,
            marginLeft:15,
        },
        navbarTitleItemStyle: {
            width:66,
            height:20,
        },
        navbarRightItemStyle: {
            width:20,
            height:20,
            marginRight:15,
        },

        listViewStyle: {
            width:width,
        },
    });

   
   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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
   
   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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280

海淘模块.gif

获取最新数据个数功能

这里需要 cnmaxid 和 usmaxid 参数，他们分别是最新数据中第一个元素的 id，也就是我们每次刷新的时候都保存一下数组中的第一个元素的id。

     // 首页存储数组中第一个元素的id
     let cnfirstID = responseData.data[0].id;
     AsyncStorage.setItem('cnfirstID', cnfirstID.toString());
   
   1
2
3
   
   1
2
3

这个功能是从程序启动的时候就开始定时循环执行，也就是我们需要放到入口文件中（Main文件）。

    componentDidMount() {
    // 注册通知
    this.subscription = DeviceEventEmitter.addListener('isHiddenTabBar', (data)=>{this.tongZhi(data)});

    // 声明变量
    let cnfirstID = 0;
    let usfirstID = 0;

    // 最新数据的个数
    setInterval(() => {
        // 取出id
        AsyncStorage.getItem('cnfirstID')
            .then((value) => {
                cnfirstID = parseInt(value);
            });
        AsyncStorage.getItem('usfirstID')
            .then((value) => {
                usfirstID = parseInt(value);
            });

        if (cnfirstID !== 0 && usfirstID !== 0) {   // 参数不为0
            // 拼接参数
            let params = {
                "cnmaxid" : cnfirstID,
                "usmaxid" : usfirstID
            };

            // 请求数据
            HTTPBase.get('http://guangdiu.com/api/getnewitemcount.php', params)
                .then((responseData) => {

                    console.log(responseData);
                    this.setState({
                        cnbadgeText:responseData.cn,
                        usbadgeText:responseData.us
                    })
                })
            }
        }, 30000);
    }
   
   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
   
   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

获取最新数据个数.gif

注：上面使用到的 setInterval 也是个定时器，和我们之前使用的 setTimeout 不同的是，setInterval 是周期定时器，比如上面时间为30000毫秒，意思就是每过 30000毫秒 就会执行一次里面的代码。而 setTimeout 则是会在规定的时间后 尽快 执行任务。

barnett_y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React-Native 之项目实战(三)

本文有配套视频，可以酌情观看。文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我。文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关。如文中内容对您造成不便，烦请联系 277511806@qq.com 处理，谢谢。转载麻烦注明出处，谢谢。本篇资源：链接: https://pan.baidu.com/s/1jIbW2n8 密码: wqe4
复制链接

扫一扫