javascript - 在 TabBar 中移动选项卡时组件生命周期 (ComponentDidMount) 不起作用？

Question

当我使用react-native-tab-navigator这些导航器的库移动页面以移动componentDidMount页面时，它只能完成一次，之后，生命周期组件不起作用，请寻求解决方案：按照我的代码。

我在 Github 上打开了一个问题，我尝试将状态发送给父级。我用过

react-native-tab-navigator 版本 0.3.4

class MainTab extends Component {

state = {
    selectedTab: 'home'
};

render() {
        return (

                <
                TabNavigator.Item selected = {
                    this.state.selectedTab === 'home'
                }
                title = "Home"
                selectedTitleStyle = {
                    {
                        color: "#FF7158",
                    }
                }
                tabStyle = {
                    {
                        borderTopWidth: this.state.selectedTab === 'home' ? 3 : 0,
                        borderTopColor: '#FF7158',
                        backgroundColor: this.state.selectedTab === 'home' ? '#fff8f6' : '#FFFFFF'
                    }
                }
                renderIcon = {
                    () => < Image source = {
                        require('allComponents/images/ic_beranda.png')
                    }
                    style = {
                        {
                            width: 18,
                            height: 18
                        }
                    }
                    />}
                    renderSelectedIcon = {
                        () => < Image source = {
                            require('allComponents/images/ic_beranda-actives.png')
                        }
                        style = {
                            {
                                width: 18,
                                height: 18
                            }
                        }
                        />}
                        // renderBadge={() => <View style={{width: 20, height:20, backgroundColor:'#FF7158', borderRadius:50}}><Text style={{fontSize:12, textAlign:'center', color:'white', fontWeight:'600'}}>2}
                        onPress = {
                            () => this.setState({
                                selectedTab: 'home'
                            })
                        } >

                        <
                        /TabNavigator.Item> <
                        TabNavigator.Item
                        selected = {
                            this.state.selectedTab === 'profile'
                        }
                        title = "Pemesanan"
                        selectedTitleStyle = {
                            {
                                color: "#FF7158",
                            }
                        }
                        tabStyle = {
                            {
                                borderTopWidth: this.state.selectedTab === 'profile' ? 3 : 0,
                                borderTopColor: '#FF7158',
                                backgroundColor: this.state.selectedTab === 'profile' ? '#fff8f6' : '#FFFFFF'
                            }
                        }
                        renderIcon = {
                            () => < Image source = {
                                require('allComponents/images/ic_pemesanan-inactive.png')
                            }
                            resizeMode = 'stretch'
                            style = {
                                {
                                    width: 18,
                                    height: 18
                                }
                            }
                            />}
                            renderSelectedIcon = {
                                () => < Image source = {
                                    require('allComponents/images/ic_pemesanan-active.png')
                                }
                                resizeMode = 'stretch'
                                style = {
                                    {
                                        width: 18,
                                        height: 18
                                    }
                                }
                                />}
                                onPress = {
                                    () => this.setState({
                                        selectedTab: 'profile'
                                    })
                                } >

                                <
                                /TabNavigator.Item> <
                                TabNavigator.Item
                                selected = {
                                    this.state.selectedTab === 'riwayat'
                                }
                                title = "Akun"
                                selectedTitleStyle = {
                                    {
                                        color: "#FF7158",
                                    }
                                }
                                tabStyle = {
                                    {
                                        borderTopWidth: this.state.selectedTab === 'riwayat' ? 3 : 0,
                                        borderTopColor: '#FF7158',
                                        backgroundColor: this.state.selectedTab === 'riwayat' ? '#fff8f6' : '#FFFFFF'
                                    }
                                }
                                renderIcon = {
                                    () => < Image source = {
                                        require('allComponents/images/ic_akun-inactive.png')
                                    }
                                    resizeMode = 'stretch'
                                    style = {
                                        {
                                            width: 18,
                                            height: 18
                                        }
                                    }
                                    />}
                                    renderSelectedIcon = {
                                        () => < Image source = {
                                            require('allComponents/images/ic_akun-active.png')
                                        }
                                        resizeMode = 'stretch'
                                        style = {
                                            {
                                                width: 18,
                                                height: 18
                                            }
                                        }
                                        />}
                                        onPress = {
                                            () => this.setState({
                                                selectedTab: 'riwayat'
                                            })
                                        } >

                                        <
                                        /TabNavigator.Item>

                                    );
                                }
                            }

我希望它componentDidMount可以在 TabBar 上运行。

标签： javascriptreactjsreact-native

Answer 1

componentDidMount当它在 tabNavigator 内时不会触发（预计第一次安装组件）。

原因是当从一个选项卡切换到另一个选项卡时，每个选项卡都会第一次呈现，而所有选项卡都呈现出来而不卸载它们。

我不知道您使用的是哪个导航器，但通常您有办法知道屏幕何时“聚焦”以及何时“模糊”。当屏幕从模糊变为聚焦时，使用它们可以触发功能。