“焦点”听众不是每次都打电话。反应原生

我是反应原生技术的新手。我在我的反应原生应用程序中使用了以下层次结构。

1.我使用过Stack.Navigator,我在其中使用各种屏幕,I.登录,II。注册,III。标签栏屏幕。

  1. 在 TabBar 屏幕中,我使用了各种单独的 Stack.Navigator,因为我必须在每个子屏幕上显示标签栏。

  2. 现在的问题是,当用户单击该特定屏幕时,我必须更新选项卡屏幕上的一些值。它第一次调用一次,第二次没有工作。

我已使用以下代码在选项卡屏幕上执行“焦点”侦听器:-

  onScreenFocus = () => {
     this.reloadFavrouite()
     alert("again calling")
 }

 componentDidMount() {
     this.props.navigation.addListener('focus', () =>     this.onScreenFocus())
     this.reloadFavrouite()
 }

“焦点”侦听器效果很好如果我不在每个选项卡屏幕上使用单独的 Stack.Navigator,但它会产生另一个问题是选项卡栏未显示在子屏幕中。

我已经使用了这个标签导航器代码:- 请检查

export default class TabNavigator extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Tab.Navigator initialRouteName='Home' lazy={true} tabBarOptions={
                {
                    style: {
                        backgroundColor: '#FFFFFF',
                        borderTopLeftRadius: 25,
                        borderTopRightRadius: 25,
                        overflow: 'hidden',
                        borderColor: 'transparent',
                    }
                }
            }>
                <Tab.Screen name="HomeNavigator" component={HomeNavigator} 
                    options={{

                        tabBarLabel: ({ focused }) => {
                            const tintColortab = focused ? "#006C35"
                                : "#000000"
                            return (
                                <Text style={{ color: tintColortab, fontSize: 8, fontFamily: "Roboto-Bold", marginBottom: 6 }}>{StringsOfLanguages.Home}</Text>
                            )
                        },

                        tabBarIcon: ({ focused }) => {
                            const tintColortab = focused ? "#006C35"
                                : "#000000"
                            return (
                                <Image source={require('../../../assets/images/TabBarIcons/ic_home_selected/ic_home_selected.png')}
                                    style={{ marginTop: 10, tintColor: tintColortab }}>
                                </Image>

                            )
                        }
                    }}>         
                </Tab.Screen>
                <Tab.Screen name="FavouriteNavigator" component={FavouriteNavigator}
                    options={{
                        tabBarLabel: ({ focused }) => {

                            const tintColortab = focused ? "#006C35"
                                : "#000000"
                            return (
                                <Text style={{ color: tintColortab, fontSize: 8, fontFamily: "Roboto-Bold", marginBottom: 6 }}>{StringsOfLanguages.Favorite}</Text>
                            )
                        },
                        tabBarIcon: ({ focused }) => {
                            const tintColortab = focused ? "#006C35"
                                : "#000000"
                            return (
                                <Image source={require('../../../assets/images/TabBarIcons/ic_favorits_unselected/ic_favorite_unselected.png')}
                                    style={{ marginTop: 10, tintColor: tintColortab }}>
                                </Image>
                            )
                        }
                    }}
                >        
                </Tab.Screen>
            </Tab.Navigator>
        );
    }

个人导航就像:-

class HomeNavigator extends React.Component {
    render() {
        return (
            <NavigationContainer independent={true}>
                <Stack.Navigator>
                    <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
                    <Stack.Screen name="AllRestuarent" component={AllRestuarent} options={{ headerShown: false }} />
                    <Stack.Screen name="AllLaundry" component={AllLaundry} options={{ headerShown: false }} />
                    <Stack.Screen name="AllEntertainment" component={AllEntertainment} options={{ headerShown: false }} />
                    <Stack.Screen name="Offer" component={Offer} options={{ headerShown: false }} />
                    <Stack.Screen name="ComponyMap" component={ComponyMap} options={{ headerShown: false }} />
                </Stack.Navigator>

            </NavigationContainer>

        );
    }
}

class FavouriteNavigator extends React.Component {
    render() {
        return (
            <NavigationContainer independent={true}>
                <Stack.Navigator>
                    <Stack.Screen name="Favorites" component={Favorites} options={{ headerShown: false }} />
                    <Stack.Screen name="Offer" component={Offer} options={{ headerShown: false }} />
                    <Stack.Screen name="ComponyMap" component={ComponyMap} options={{ headerShown: false }} />
                </Stack.Navigator>

            </NavigationContainer>

        );
    }
}
stack overflow 'focus' listener not calling every time. React Native
原文答案

答案:

作者头像

You are not using focus listener in the right way according to your current version, You are using react-navigation v5 and you are adding a listener the way it is used in react-navigation v4, Here is a solution to your problem.

class YourClassComopnent extends React.Component {
      componentDidMount() {

        /* 
           Now you can access to isFocused prop and 
           this prop will be true whenever your screen is
           in the focus.
        */ 

        if(this.props.isFocused) this.onScreenFocus()
        this.reloadFavrouite()
      }
      render() {

        // Get it from props

        const { isFocused } = this.props;
      }
    }
    
    // Wrap and export
    export default function(props) {
      const isFocused = useIsFocused();
       // pass your class here
      return <YourClassComopnent {...props} isFocused={isFocused} />;
    } 

Link to docs, how you can use isFocused in react-navigation v5

作者头像

Pass the function itself. Looks like you are invoking the function and passing the result as an anonymous function. Please try the following

  onScreenFocus = () => {
     this.reloadFavrouite()
     alert("again calling")
 }

 componentDidMount() {
     this.props.navigation.addListener('focus', this.onScreenFocus)
     this.reloadFavrouite()
 }