React-NativeReact Native

React-Native 之 项目实战(四)

2017-04-07  本文已影响426人  珍此良辰

前言

数据持久化

数据持久化.gif

译注：

  • 有关 realm 的配置，可转到 React-Native 之 数据持久化 查看，这边不多赘述。

  • 当我们完全配置完 realm 后，会发现整个工程 多出将近500M+，不用担心，这些只不过是 realm 的依赖库，等我们后面 打包 后就不会有这么多东西了。

  • 我们已经使用了 git 进行对代码进行托管，那么，如果从仓库拉取最新数据时，是不是还是要重新配置 node_modules 文件夹，这个就很麻烦了，我们可以备份一下 node_modules 文件夹，将它 拷贝 进工程就可以使用了。

.gitignore 语法

自定义详情cell

详情页.gif

译注：

  • 这边需要注意的是时间的转化，方式有很多，这边就以最直接的方式来计算。

  • 还有需要注意的是在 JAVA 中，获取到的月份是和我们现在的月份少 1个月的，这是因为 JAVA 的月份是从 0 开始，Javascript 也是一样的。

小时风云榜

    export default class GDHourList extends Component {
    
        // 构造
        constructor(props) {
            super(props);
            // 初始状态
            this.state = {
                dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2}),
                loaded:false,
                prompt:'',
            };
    
            this.nexthourhour = '';
            this.nexthourdate = '';
            this.lasthourhour = '';
            this.lasthourdate = '';
            this.loadData = this.loadData.bind(this);
        }
    
        // 加载最新数据网络请求
        loadData(resolve, date, hour) {
            let params = {};
    
            if (date) {
                params = {
                    "date" : date,
                    "hour" : hour
                }
            }
    
            HTTPBase.get('http://guangdiu.com/api/getranklist.php', params)
                .then((responseData) => {
    
                    // 重新渲染
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRows(responseData.data),
                        loaded:true,
                        prompt:responseData.displaydate + responseData.rankhour + '点档' + '(' + responseData.rankduring + ')'
                    });
    
                    // 关闭刷新动画
                    if (resolve !== undefined){
                        setTimeout(() => {
                            resolve();
                        }, 1000);
                    }
    
                    // 暂时保留一些数据
                    this.nexthourhour = responseData.nexthourhour;
                    this.nexthourdate = responseData.nexthourdate;
                    this.lasthourhour = responseData.lasthourhour;
                    this.lasthourdate = responseData.lasthourdate;
                })
                .catch((error) => {
    
                })
        }
    
        // 跳转到设置
        pushToSettings() {
            this.props.navigator.push({
                component:Settings,
            })
        }
    
        // 返回中间标题
        renderTitleItem() {
            return(
                <Image source={{uri:'navtitle_rank_106x20'}} style={styles.navbarTitleItemStyle} />
            );
        }
    
        // 返回右边按钮
        renderRightItem() {
            return(
                <TouchableOpacity
                    onPress={()=>{this.pushToSettings()}}
                >
                    <Text style={styles.navbarRightItemStyle}>设置</Text>
                </TouchableOpacity>
            );
        }
    
        // 根据网络状态决定是否渲染 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}
                    />
                );
            }
        }
    
        // 跳转到详情页
        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)}
                >
                    <CommunalCell
                        image={rowData.image}
                        title={rowData.title}
                        mall={rowData.mall}
                        pubTime={rowData.pubtime}
                        fromSite={rowData.fromsite}
                    />
                </TouchableOpacity>
            );
        }
    
        componentDidMount() {
            this.loadData();
        }
    
        lastHour() {
            this.loadData(undefined, this.lasthourdate, this.lasthourhour);
        }
    
        nextHour() {
            this.loadData(undefined, this.nexthourdate, this.nexthourhour);
        }
    
        render() {
            return (
                <View style={styles.container}>
                    {/* 导航栏样式 */}
                    <CommunalNavBar
                        titleItem = {() => this.renderTitleItem()}
                        rightItem = {() => this.renderRightItem()}
                    />
    
                    {/* 提醒栏 */}
                    <View style={styles.promptViewStyle}>
                        <Text>{this.state.prompt}</Text>
                    </View>
    
                    {/* 根据网络状态决定是否渲染 listview */}
                    {this.renderListView()}
    
                    {/* 操作栏 */}
                    <View style={styles.operationViewStyle}>
                        <TouchableOpacity
                            onPress={() => this.lastHour()}
                        >
                            <Text style={{marginRight:10, fontSize:17, color:'green'}}>{"< " + "上1小时"}</Text>
                        </TouchableOpacity>
    
                        <TouchableOpacity
                            onPress={() => this.nextHour()}
                        >
                            <Text style={{marginLeft:10, fontSize:17, color:'green'}}>{"下1小时" + " >"}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: 'center',
            backgroundColor: 'white',
        },
    
        navbarTitleItemStyle: {
            width:106,
            height:20,
            marginLeft:50
        },
        navbarRightItemStyle: {
            fontSize:17,
            color:'rgba(123,178,114,1.0)',
            marginRight:15,
        },
    
        promptViewStyle: {
            width:width,
            height:44,
            alignItems:'center',
            justifyContent:'center',
            backgroundColor:'rgba(251,251,251,1.0)',
        },
    
        operationViewStyle: {
            width:width,
            height:44,
            flexDirection:'row',
            justifyContent:'center',
            alignItems:'center',
        },
    });
小时风云榜.gif

首页筛选功能

    export default class GDCommunalSiftMenu extends Component {
    
        static defaultProps = {
            removeModal:{},
            loadSiftData:{}
        };
    
        static propTypes = {
            data:PropTypes.array,
        };
    
        // 构造
          constructor(props) {
            super(props);
            // 初始状态
            this.state = {
                dataSource: new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2})
            };
          }
    
        // 退出
        popToHome(data) {
            this.props.removeModal(data);
        }
    
        // 点击事件
        siftData(mall, cate) {
            this.props.loadSiftData(mall, cate);
            this.popToHome(false);
        }
    
        // 处理数据
        loadData() {
            let data = [];
    
            for (let i = 0; i<this.props.data.length; i++) {
                data.push(this.props.data[i]);
            }
    
            // 重新渲染
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(data),
            })
        }
    
        renderRow(rowData) {
            return(
                <View style={styles.itemViewStyle}>
                    <TouchableOpacity
                        onPress={() => this.siftData(rowData.mall, rowData.cate)}
                    >
                        <View style={styles.itemViewStyle}>
                            <Image source={{uri:rowData.image}} style={styles.itemImageStyle} />
                            <Text>{rowData.title}</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            )
        }
    
        componentDidMount() {
            this.loadData();
        }
    
        render() {
            return(
                <TouchableOpacity
                    onPress={() => this.popToHome(false)}
                    activeOpacity={1}
                >
                    <View style={styles.container}>
                        {/* 菜单内容 */}
                        <ListView
                            dataSource={this.state.dataSource}
                            renderRow={this.renderRow.bind(this)}
                            contentContainerStyle={styles.contentViewStyle}
                            initialListSize={16}
                        />
                    </View>
                </TouchableOpacity>
            )
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            width:width,
            height:height
        },
    
        contentViewStyle: {
            flexDirection:'row',
            flexWrap:'wrap',
            width: width,
            top:Platform.OS === 'ios' ? 64 : 44,
        },
    
        itemViewStyle: {
            width:width * 0.25,
            height:70,
            backgroundColor:'rgba(249,249,249,1.0)',
            justifyContent:'center',
            alignItems:'center'
        },
    
        itemImageStyle: {
            width:40,
            height:40
        }
    });

    // 加载最新数据网络请求
    loadSiftData(mall, cate) {

        let params = {};

        if (mall === "" && cate === "") {   // 全部
            this.loadData(undefined);
            return;
        }

        if (mall === "") {  // cate 有值
            params = {
                "cate" : cate,
                "country" : "us"
            };
        }else {
            params = {
                "mall" : mall,
                "country" : "us"
            };
        }


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

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

            })
            .catch((error) => {

            })
    }
筛选功能.gif

搜索模块

搜索页面.gif

设置

设置.gif
上一篇 下一篇

猜你喜欢

热点阅读