使用createMaterialTopTabNavigator（）

Question

我使用createMaterialTopTabNavigator创建了5个标签，并在每个标签上实现了搜索栏。但是，如果我在选项卡之间切换，则组件将保留数据并且不会刷新。我们的componentWillUnmount（）方法没有被调用。

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    SafeAreaView,
    FlatList,
    TouchableOpacity,
    TextInput
} from "react-native";
import SegmentedControlTab from "react-native-segmented-control-tab";

let context;
import MachineInformationCard from './MachineInformationCard';

export default class AllMachine extends Component {
    constructor(props) {
        super(props);
        context = this;
        this.state = {
            selectedIndex: 0,
            machineData: [],
            tempMachineData: []
        }
    }


    componentDidMount = () => {

        const fetchData = [{
            'Status': 'ON',
            'MachineName': '1',
            'OperatorName': 'Abhishek',
            'Target': 500,
            'Achieved': 200,
            'Health': '60%',
            'Shift': 1,
            'Date': '29-10-2019'
        },
        {
            'Status': 'Maintenance',
            'MachineName': '12',
            'OperatorName': 'Vicky',
            'Target': 600,
            'Achieved': 100,
            'Health': '20%',
            'Shift': 2,
            'Date': '30-10-2019'
        },
        {
            'Status': 'OFF',
            'MachineName': '3',
            'OperatorName': 'Prasad',
            'Target': 700,
            'Achieved': 700,
            'Health': '80%',
            'Shift': 3,
            'Date': '28-10-2019'
        },
        {
            'Status': 'OFF',
            'MachineName': '34',
            'OperatorName': 'Prasad',
            'Target': 700,
            'Achieved': 700,
            'Health': '80%',
            'Shift': 3,
            'Date': '28-10-2019'
        }];
        this.setState({
            machineData: fetchData,
            tempMachineData: fetchData,
        })
    }

    getSearchValue = (data) => {
        const filteredMachineNames = this.state.tempMachineData.filter(
            macName => {
                let machineNameLowercase = macName.MachineName.toLowerCase()
                let searchTermLowercase = data.toLowerCase()
                return machineNameLowercase.indexOf(searchTermLowercase) > -1;
            }
        )
        this.setState({
            machineData: filteredMachineNames
        })
    }



    _renderItem({ item, index }) {
        return (
            <TouchableOpacity
                onPress={() => context.props.navigation.navigate('MachineProfile')}>
                <MachineInformationCard {...item} />
            </TouchableOpacity>
        )
    }
    render() {
        return (
            <SafeAreaView style={styles.container}>

                <View style={{
                    backgroundColor: '#E1E1E1', borderRadius: 30,
                    flexDirection: 'row', marginTop: 5
                }}>
                    <TextInput style={{
                        color: 'black', fontSize: 17, height: 40, padding: 10
                    }}
                        placeholder={'Search Machines'}
                        placeholderTextColor={'grey'}
                        onChangeText={(value) => this.getSearchValue(value)} />
                </View>

                <FlatList
                    data={this.state.machineData}
                    renderItem={this._renderItem}
                    keyExtractor={({ id }, index) => id} />

            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    CardItem: {
        flex: 1,
        flexDirection: 'row',
        height: 120,
        backgroundColor: '#e7e7e7',
        borderRadius: 5,
        overflow: 'hidden',
        margin: 5,
        shadowColor: 'black',
        shadowOpacity: 0.8,
        elevation: 8
    }
});

[[具有搜索功能的屏幕1] [当我切换到“打开”选项卡并返回到“所有计算机”时，我希望“所有计算机”显示整个列表而不是已过滤的列表]] [相同]

Answer 1

组件不会以选项卡式布局卸载。您必须使用导航事件来确定屏幕是进入焦点还是进入焦点-documentation

示例-

const willFocusSubscription = this.props.navigation.addListener(
  'willFocus',
  payload => {
    // callback when component comes into view
    console.debug('willFocus', payload);
  }
);

// Remove the listener when you are done (usually in componentWillUnmount)
// willFocusSubscription.remove();

事件-

• willFocus-屏幕将聚焦
• didFocus-屏幕聚焦（如果有过渡，则过渡完成）
• willBlur-屏幕将无法对焦
• didBlur-屏幕未聚焦（如果存在过渡，则过渡完成）