7. 偷用Swiper简改

实验性项目无法发布到市场,决定整改

  1. 项目改名为RNDouBan,决定做一个用react-native写的简单豆瓣客户端
  2. 测试版发布到google市场以获取豆瓣sdk做第三方豆瓣登录才好往下做Google市场需翻墙
  3. 修改bug以及以前代码留下的坑
  4. 简单修改react-native-swiper以实现滑动切屏
  5. 先上效果图(代码地址

宣传图.jpg

google市场要的宣传图

  • 由于react-native-router-flux封装了NavBav,但是不太喜欢,主要是给导航栏添加右侧功能健不太亲民,所有自己封装了一个精简版,有很多不如意的地方,水平有限:app/components/navbar.js:
'use strict';

import React, {
    Component
} from 'react';

import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity
} from 'react-native';
import {
    Actions
} from 'react-native-router-flux';
import Button from 'react-native-button';
import Icon from 'react-native-vector-icons/Ionicons';
import Style from '../common/style';

class NavBar extends Component {
    render() {
        return (
            <View style={styles.navbar}>
                <View style={styles.backBtn}>
                    {this._renderBack()}
                </View>
                <View style={styles.navbarTitle}>
                    <Text style={styles.title}>{this.props.title}</Text>
                </View>
                <View style={[Style.valignCenter, styles.rightBtn]}>
                    {this._renderRight()}
                </View>
            </View>
        );
    }
    _renderBack() {

        switch (this.props.back) {
            case 'back':
                return (
                    <TouchableOpacity onPress={() => Actions.pop()}>
                        <Icon name='md-arrow-back' size={20} color='#cdcdcd'></Icon>
                    </TouchableOpacity>
                )
            case 'cancel':
                return (
                    <TouchableOpacity onPress={() => Actions.pop()}>
                        <Text style={Style.blueText}>取消</Text>
                    </TouchableOpacity>
                )
            default: 
                return null;
        }

    }
    _renderRight() {

        if (typeof this.props.renderRight === 'function') {
            return this.props.renderRight();
        }

        switch (this.props.renderRight) {
            case 'share':
                return (
                    <TouchableOpacity onPress={()=>alert('分享')} style={[styles.buttonStyle]}>
                        <Icon name='ios-redo-outline' size={14} color='#cdcdcd'></Icon>
                    </TouchableOpacity>
                )
            case 'button':
                return (
                    <Button onPress={this.props.onRight.bind(this)} containerStyle={[Style.redBtn, styles.buttonStyle]}>
                        <Icon name={this.props.rightIcon} size={14} color='#fff'> {this.props.rightTitle}</Icon>
                    </Button>
                )
            case 'text':
                return (
                    <TouchableOpacity onPress={this.props.onRight.bind(this)}>
                        <Text style={Style.redText}> {this.props.rightTitle}</Text>
                    </TouchableOpacity>
                )
            default:
                return null;
        }

    }
}

const styles = StyleSheet.create({
    navbar: {
        // flex: 3,
        height: 44,
        backgroundColor: '#fff',
        borderBottomWidth: 0,
        borderBottomColor: '#fff',
        flexDirection: 'row',
        justifyContent: 'center',
    },
    navbarTitle: {
        flex: 2,
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontSize: 16,
        color: 'black',
    },
    backBtn: {
        flex: 1,
        alignItems: 'flex-start',
        justifyContent: 'center',
        marginLeft: 16,
    },
    rightBtn: {
        flex: 1,
        alignItems: 'flex-end',
        justifyContent: 'center',
        marginRight: 16,
    },
    buttonStyle: {
        padding: 6,
    }
});


export default NavBar;

缺点:不能根据导航栈是否为空自动渲染返回按钮

  • action如前文所示,豆瓣北京周末活动API地址:http://api.douban.com/v2/event/list?loc=108288&day_type=weekend&type=party
  • react-native-swiper地址不是特别的好用但是目前我没发现更加实用的,这个组件本来是用来做轮播图的,看了一下源码,应用的是ViewPagerAndroidScrollView,所以觉得可以一用,有其他需求的童鞋可以看看源码适当修改,类似的组件大体如此,源码也简单,不到600行,核心:
renderScrollView(pages) {
     if (Platform.OS === 'ios')
         return (
            <ScrollView ref="scrollView"
             {...this.props}
             {...this.scrollViewPropOverrides()}
                       contentContainerStyle={[styles.wrapper, this.props.style]}
                       contentOffset={this.state.offset}
                       onScrollBeginDrag={this.onScrollBegin}
                       onMomentumScrollEnd={this.onScrollEnd}
                       onScrollEndDrag={this.onScrollEndDrag}>
             {pages}
            </ScrollView>
         );
      return (
         <ViewPagerAndroid ref="scrollView"
          {...this.props}
            initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
            onPageSelected={this.onScrollEnd}
            style={{flex: 1}}>
            {pages}
         </ViewPagerAndroid>
      );
  },

看这段代码应该就很清楚了,如果是android系统就渲染Pager如果是ios就使用横向的ScrollView,修改后的app首页如下:

import React, {
    PropTypes,
} from 'react';

import {
    View,
    ScrollView,
    Text,
    Image,
    ListView,
    StyleSheet,
    TouchableOpacity,
    RefreshControl,
    Platform,
} from 'react-native';

import {
    connect
} from 'react-redux';
import {
    Actions
} from 'react-native-router-flux';
import Swiper from 'react-native-swiper';

import {
    fetchMovies,
    fetchEvents
} from './action';
import Loading from '../components/loading';
import LoadMore from '../components/loadMore';
import Util from '../common/util';
import MovieCard from '../components/movieCard';
import EventCard from '../components/eventCard';
import NavBar from '../components/navbar';
import Style from '../common/style';

class Home extends React.Component {
    constructor(props) {
        super(props);

        let moviesDS = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
        });

        let eventsDS = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
        });

        this.state = {
            moviesDS: moviesDS,
            eventsDS: eventsDS,
            // data: [],
            refreshing: false,
        };
    }
    componentDidMount() {
        const {
            dispatch,
            movies,
        } = this.props;
        if (movies.subjects.length === 0) {
            dispatch(fetchMovies());
            dispatch(fetchEvents());
        }
    }
    render() {
        const {
            isFetching,
            movies,
            events,
        } = this.props;

        // if (!isFetching && movies.subjects.length > 0) {
        //     this.state.data = this.state.data.concat(movies.subjects);
        // }

        return (
            <View style={styles.wrapper}>
                <NavBar title='书影音&活动'></NavBar>
                <Swiper loop={false} renderPagination={this._renderPagination.bind(this)} style={Style.mt1}
                >
                    <View style={styles.children} dotTitle='电影'>
                        {isFetching && movies.subjects.length === 0 ? <Loading/ > : (
                      <ListView dataSource={this.state.moviesDS.cloneWithRows(movies.subjects)} renderRow={this._renderRow.bind(this)}
                        enableEmptySections={true}
                        onEndReached={this._handleLoadMore.bind(this)} 
                        onEndReachedThreshold={10}
                        initialListSize={3}
                        refreshControl={
                          <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh.bind(this)}
                            colors={['#00B51D']}
                            titleColor='#00B51D'
                          />
                        }
                        renderFooter={() => this.props.hasMore ? <LoadMore active={isFetching}/> : null }
                      />
                      )}
                    </View>
                    <View style={styles.children} dotTitle='活动'>
                        {isFetching && movies.subjects.length === 0 ? <Loading/ > : (
                      <ListView dataSource={this.state.eventsDS.cloneWithRows(events.events)} renderRow={this._renderEvent.bind(this)}
                        enableEmptySections={true}
                        onEndReached={this._eventLoadMore.bind(this)} 
                        onEndReachedThreshold={10}
                        initialListSize={3}
                        refreshControl={
                          <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefreshEvent.bind(this)}
                            colors={['#00B51D']}
                            titleColor='#00B51D'
                          />
                        }
                        renderFooter={() => this.props.hasMore ? <LoadMore active={isFetching}/> : null }
                      />
                      )}
                    </View>
                </Swiper>
            </View>

        );
    }
    _renderPagination(index, total, swiper) {
        // By default, dots only show when `total` > 2
        if (total <= 1) return null;

        let dotStyle = {
            width: Util.window.width / total,
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
            paddingTop: 11,
            paddingBottom: 11,
        }

        let children = swiper.props.children;

        let dots = children.map((v, k) => {
            return (
                <View style={[dotStyle, index === k ? styles.activeDot : styles.dot]} key={k}>
                    <Text style={index === k ? styles.activeDotTitle : styles.dotTitle}>{v.props.dotTitle}</Text>
                </View>
            )
        })

        return (
            <View pointerEvents='none' style={[styles.paginationStyle]}>
            {dots}
          </View>
        )
    }
    _onRefresh() {
        // 刷新
        const {
            dispatch
        } = this.props;
        dispatch(fetchMovies())
    }
    _handleLoadMore() {
        // 加载更多
        if (this.props.hasMore) {
            const {
                dispatch,
                movies
            } = this.props;
            let start = movies.start + movies.count;
            dispatch(fetchMovies(start))
        }

    }
    _onRefreshEvent() {
        // 刷新
        const {
            dispatch
        } = this.props;
        dispatch(fetchEvents())
    }
    _eventLoadMore() {
        // 加载更多
        if (this.props.hasMore) {
            const {
                dispatch,
                events
            } = this.props;
            let start = events.start + events.count;
            dispatch(fetchEvents(start))
        }

    }
    _renderRow(row) {

        return (
            <TouchableOpacity style={styles.movieItem} onPress={() => Actions.detail({url: row.alt})}>
                <MovieCard movie={row}></MovieCard>
            </TouchableOpacity>
        )
    }
    _renderEvent(row) {

        return (
            <TouchableOpacity style={styles.movieItem} onPress={() => Actions.detail({url: row.alt})}>
                <EventCard event={row}></EventCard>
            </TouchableOpacity>
        )
    }
}

Home.propTypes = {};

Home.defaultProps = {};

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
    },
    movieItem: {
        marginTop: 10,
    },
    paginationStyle: {
        position: 'absolute',
        top: 1,
        height: 44,
        width: Util.window.width,
        flexDirection: 'row',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderBottomWidth: 0.5,
        borderBottomColor: '#cdcdcd',
    },
    activeDot: {
        borderBottomWidth: 2,
        borderBottomColor: '#00B51D',
    },
    dot: {
        borderBottomWidth: 2,
        borderBottomColor: '#fff',
    },
    dotTitle: {

    },
    activeDotTitle: {
        color: '#00B51D',
    },
    children: {
        flex: 1,
        paddingTop: 44,
    },
    cellSeparator: {
        height: 0.5,
        backgroundColor: "#DDD"
    },
});

function mapStateToProps(state) {
    return {
        ...state.moviesReducer,
        ...state.eventsReducer,
    }
}

export default connect(mapStateToProps)(Home)

主要添加_renderPagination覆盖原始的pagination,通过调正style将滑动条置顶,在每一页View加上dotTitle,效果图如上,一些style可能不适用或有冲突,检查源码以及高度做调整即可。

前文的reducer书写不太对,修改如下:

case RECEIVE_MOVIES:
            const movies = {...state.movies};
            return {
                ...state,
                isFetching: false,
                hasMore: (action.movies.start + action.movies.count) < action.movies.total,
                movies: {
                    start: action.movies.start,
                    count: action.movies.count,
                    subjects: action.movies.start === 0 ? action.movies.subjects : [].concat(movies.subjects, action.movies.subjects)
                }
            }

主要修改分页逻辑,起因是因为在ListView里面会有三个数据加载

  1. 初始化,初始化的时候数据为空[]显示页面加载条
  2. 下拉刷新,不显示页面加载条,清空原来的数据
  3. 上拉加载,显示加载更多并且将第二页的数据连接到原来的数据 一定要注意三种状态如何渲染页面以及对dataSource的修改,不然会有很多不明bug,我这里只是简单处理,具体可以依照自己的实际数据结构以及state的设计。

最后附上如何androidbuild签名的apk

  1. keytool -genkey -v -keystore release-key.keystore -alias key-alias -keyalg RSA -keysize 2048 -validity 10000keytool命令就不做详细介绍了,如果windows系统找不到,可以使用git的bash
  2. 证书生成之后复制到android/app目录下,记得修改.gitignore,不要把证书也提交了
  3. 修改配置文件android/gradle.properties加下:
RELEASE_STORE_FILE=release-key.keystore
RELEASE_KEY_ALIAS=key-alias
RELEASE_STORE_PASSWORD=*****// 生成证书的密码
RELEASE_KEY_PASSWORD=***** // 另一个密码
  1. 修改android/app/build.gradle:
def enableProguardInReleaseBuilds = true // true可以一定程度减少apk体积

android {
    ...
    defaultConfig {
        ...
    }
    signingConfigs {
        release {
            // 上文配置
            storeFile file(RELEASE_STORE_FILE)
            storePassword RELEASE_STORE_PASSWORD
            keyAlias RELEASE_KEY_ALIAS
            keyPassword RELEASE_KEY_PASSWORD
        }
    }
    ...
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
    ...
}

最后 在android目录下运行./gradlew assembleRelease成功即可在android/app/build/outputs/apk/app-release.apk找到apk,运行./gradlew installRelease可以在设备上测试安装,注意如果是调试机请先卸载debug的apk不然会安装失败。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

前端开发必备之Emmet

·介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。 基本上,大多数的文本编辑器都会允许你存储和重用一些代码块,我们...

3254
来自专栏hotqin888的专栏

golang-fullcalendar,engineercms完善日历事件-支持拖曳drop,改变时间resize

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1912
来自专栏逆向技术

win32程序之子窗口编程

  在前边我们已经讲解了窗口的本质.以及如何注册窗口类跟创建窗口. 还讲了消息循环.

2272
来自专栏有趣的django

博客园美化终极版-(自定义导航栏)----什么CSDN、简书、腾讯云专栏、个人博客和微信公众号都弱爆了

6990
来自专栏CRPER折腾记

React 折腾记 - (3) 结合Mobx实现一个比较靠谱的动态tab水平菜单,同时关联侧边栏

4142
来自专栏CRPER折腾记

React 折腾记 - (4) 侧边栏联动Tabs菜单-增强版(结合Mobx)

上个版本 :React 折腾记 - (3) 结合Mobx实现一个比较靠谱的动态tab水平菜单,同时关联侧边栏

4242
来自专栏哈雷彗星撞地球

iOS Bluetooth 打印小票(二)

在上一篇中介绍了打印小票所需要的命令,这一篇介绍Bluetooth连接蓝牙和打印小票的全过程。

6602
来自专栏mukekeheart的iOS之旅

iOS项目——基本框架搭建

项目开发过程中,在完成iOS项目——项目开发环境搭建之后,我们首先需要考虑的就是我们的项目的整体框架与导航架构设计,然后在这个基础上考虑功能模块的完成。 一 ...

4468
来自专栏青山绿水

新版Begin主题侧边栏和两栏标题美化

这个美化教程原先是在朱曙明博客看到的,他文章里提到6.27之后的begin主题无法使用这个教程,我就自己琢磨琢磨,看了下css,对比对比,就让我琢磨出了新版本的...

742
来自专栏ionic3+

svg平移缩放

svg平移缩放,我刚开始尝试的是自己处理外层容器的控制,结果发现能用,但是效果不太好,有拖尾现象,后来用个js库svg-pan-zoom即可。如果想支持手机端手...

1392

扫码关注云+社区

领取腾讯云代金券