从产品详细信息转到产品屏幕时,我遇到了问题。我实现了一个后退按钮,该按钮称为this.props.navigator.pop();。如果点击后退按钮,则确实会转到产品屏幕,但是产品列表组件将卸载,重新安装并重新加载整个数据。事实并非如此!我仅在Android上遇到此问题,iOS完美运行,没有重新加载以及列表的滚动位置保留。该问题仅出现在Android中。
代码如下:
产品屏幕:
import React, { Component } from 'react';
import { View } from 'react-native';
import ProductComponent from '../../components/product/product.component';
import { Container } from 'native-base';
import HeaderComponent from '../../components/header/header.component';
class ProductScreen extends Component {
constructor(props){
super(props);
}
render(){
return(
<Container>
<HeaderComponent title={"Products"} back={this.props.back} userMenu={true} navigator={this.props.navigator} />
<View style={{flex: 1}}>
<ProductComponent navigator={this.props.navigator} />
</View>
</Container>
);
}
}
export default ProductScreen;
产品列表组件:
import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Image, StyleSheet, View, RefreshControl, FlatList } from 'react-native';
import { Text, Button } from 'native-base';
import {getProducts} from '../../store/actions/index';
import ProductDetailsComponent from './ProductDetailsComponent.component';
class ProductComponent extends Component{
constructor(props){
super(props);
this.loadProducts=this.loadProducts.bind(this);
}
componentDidMount(){
this.loadProducts();
}
loadProducts(){
this.props.onLoadProducts();
}
_onRefresh() {
this.props.onLoadProducts();
}
render(){
return(
<View>
<FlatList
numColumns={1}
refreshControl={
<RefreshControl
onRefresh={this._onRefresh.bind(this)}
/>
}
data={this.props.products}
renderItem={({ item }) => (
item.product ?
<ProductDetailsComponent item={item} navigator={this.props.navigator} />
: null
)}
keyExtractor={(item) => item.id}
/>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
user: state.auth.user,
products: state.products.products
}
}
const mapDispatchToProps = (dispatch) => {
return {
onLoadProducts: () => dispatch(getProducts())
};
}
export default connect(mapStateToProps, mapDispatchToProps)(ProductComponent);