Question

从产品详细信息转到产品屏幕时，我遇到了问题。我实现了一个后退按钮，该按钮称为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);

原生版本：0.53.0
使用React Native Navigation版本：1.1.375
与Redux和Axios一起使用

如何防止在Pop上重新安装组件！在React Native中

0 个答案: