7. 偷用Swiper简改
实验性项目无法发布到市场，决定整改
- 项目改名为
RNDouBan，决定做一个用react-native写的简单豆瓣客户端 - 测试版发布到google市场以获取豆瓣sdk做第三方豆瓣登录才好往下做Google市场需访问外国网站
- 修改bug以及以前代码留下的坑
- 简单修改
react-native-swiper以实现滑动切屏 - 先上效果图（代码地址）
宣传图.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地址不是特别的好用但是目前我没发现更加实用的，这个组件本来是用来做轮播图的，看了一下源码，应用的是ViewPagerAndroid和ScrollView，所以觉得可以一用，有其他需求的童鞋可以看看源码适当修改，类似的组件大体如此，源码也简单，不到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里面会有三个数据加载
- 初始化，初始化的时候数据为空
[]显示页面加载条 - 下拉刷新，不显示页面加载条，清空原来的数据
- 上拉加载，显示加载更多并且将第二页的数据连接到原来的数据 一定要注意三种状态如何渲染页面以及对
dataSource的修改，不然会有很多不明bug，我这里只是简单处理，具体可以依照自己的实际数据结构以及state的设计。
最后附上如何androidbuild签名的apk：
-
keytool -genkey -v -keystore release-key.keystore -alias key-alias -keyalg RSA -keysize 2048 -validity 10000，keytool命令就不做详细介绍了，如果windows系统找不到，可以使用git的bash - 证书生成之后复制到
android/app目录下，记得修改.gitignore，不要把证书也提交了 - 修改配置文件
android/gradle.properties加下：
RELEASE_STORE_FILE=release-key.keystore
RELEASE_KEY_ALIAS=key-alias
RELEASE_STORE_PASSWORD=*****// 生成证书的密码
RELEASE_KEY_PASSWORD=***** // 另一个密码
- 修改
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不然会安装失败。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016.07.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读