修复1个简单bug
,在Android手机里因为有Back
按键,所有需要特殊处理,直接贴代码如下:
修改app/navigation/index.js添加如下代码
componentWillMount() {
if (Platform.OS === 'android') {
BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
}
}
componentWillUnmount() {
if (Platform.OS === 'android') {
BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
}
}
onBackAndroid = () => { return Actions.pop()}
其实就是绑定一个事件处理而已,如果应用原生Nav
的话,一般要在pop
的时候判断栈长度是否为0也即是否在首页,不然会错处,原生Android返回键是退出应用。另外这里的Platform.OS
不判断也可以的,以为IOS实现为空,无所谓的,这里写出来只是顺便介绍Platform
。
另外修改了部分代码以实现分页查找:
修改了app/home/index.js
render() {
const {isFetching, movies} = this.props;
if (isFetching && !movies.subjects) {
return <Loading />
}
this.state.data = this.state.data.concat(movies.subjects)
return (
<ListView dataSource={this.state.dataSource.cloneWithRows(this.state.data)} renderRow={this._renderRow.bind(this)}
enableEmptySections={true}
onEndReached={this._handleLoadMore.bind(this)}
onEndReachedThreshold={10}
initialListSize={2}
refreshControl={
<RefreshControl
refreshing={isFetching}
onRefresh={this._onRefresh.bind(this)}
color="#8CD790"
/>
}
renderFooter={() => this.props.hasMore ? <LoadMore active={this.props.isFetching}/> : null }
renderHeader={() => {
return (
<View style={styles.listViewTitle}>
<Text>{movies.title}</Text>
</View>
)
}}
/>
);
}
添加下拉刷新refreshControl
组件以及上拉加载下一页:
onEndReached={this._handleLoadMore.bind(this)}
onEndReachedThreshold={10}
//对应如下函数
_onRefresh() {
// 刷新
const {dispatch} = this.props;
this.state.data = [];
dispatch(fetchMovies())
}
_handleLoadMore() {
// 加载更多
if (this.props.hasMore) {
const {dispatch, movies} = this.props;
let start = movies.start + movies.count;
dispatch(fetchMovies(start))
}
}
app/home/reducer.js
export function moviesReducer (
state={
isFetching: true,
hasMore: true,
movies: {}
}, action
) {
switch (action.type) {
case REQUEST_MOVIES:
return Object.assign({}, state, {
isFetching: true,
})
case RECEIVE_MOVIES:
const {movies} = action;
return Object.assign({}, state, {
movies: action.movies,
isFetching: action.isFetching,
hasMore: (movies.start + movies.count) < movies.total
})
default:
return state
}
}
简单处理了一下,不够严格,请依据实际业务自行修改。