在 React Navigation v3 中单击 React Native 中 bottomTabNavigator 上的选项卡时，如何刷新我的组件？

Question

I am using react-navigation version 3, I have bottom tab navigator, have 4 tabs.

out of which one is chat-screen, called as Chat , containing two views as:

1. main chat screen for chats or posts

2. if not login then show with buttons for signup and login.

when clicked on signup or login, it will take to respective screen for signing or logging in.

but from login/signin page when I click on bottom-tab navigator on Chat , it should again reload and check whether user is logged in or not?

problem is when I am navigating to signin/login page, from my tab, then It's not refreshing or called again or remounted.

1. my chat component is:

    class ChatScreen extends React.Component { constructor(props) { super(props); this.state = { loading: true, refreshing: false } this.onRefresh = this.onRefresh.bind(this); let WebViewRef; } componentDidMount() { this.didFocusListener = this.props.navigation.addListener( 'didFocus', () => { console.log('bottom tab navigator is called'); }, ); if (this.props.userInfo) { this.get_access_token() } else { console.log(". this.props.userInfo ") } } render() { if (this.props.userInfo && this.state:access_token) return ( <SafeAreaView style={{ flex: 1 }}> <ScrollView contentContainerStyle={{ flex. 1 }} refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={this:onRefresh} />} > <View style={{ flex: 1 }}> <WebView source={{ uri. 'my-demosite-anywebsite?com.access_token=' + this.state.access_token }} onLoad={() => this:setState({ loading. false })} ref={WebViewRef => (this.WebViewRef = WebViewRef)} /> </View> </ScrollView> </SafeAreaView> ) else if (.this.props.userInfo) { return <MyCompanyLogoScreen /> } else { return <LoadingScreen /> } } } class MyCompanyLogoScreen extends React.Component{ render() { return ( <View style={styles.container}> {?this:state,request_to_login: <View> <MyCompanyLogoScreenAllComponents/> <Button bgColor="#4cd137" textColor="#FFFFFF" secondary rounded style={{ alignSelf, 'stretch': marginTop, hp(5): width. '35%', marginRight: wp(6) }} caption={'LOGIN UP'} onPress={() => this.navigateToLoginScreen(redirect_to_signup_or_login = "login") } /> </View> }

my problem is how can I refresh whole component when I tap on tab at bottomTabNavigator as Chat ?

also didFocus is not working.

Answer 1

you can use higher order component which passes the isFocused prop into a wrapped component. example:

import { withNavigationFocus } from 'react-navigation';

class TabLabel extends React.Component {

    componentDidUpdate(prevProps) {
      if (prevProps.isFocused !== this.props.isFocused) {
        //Call any action to update you view
        //fetch data when the component is focused
        //To prevent extra component re-renders, you may need to write some logic in shouldComponentUpdate
        }
      }

  render() {
    return <Text>{this.props.isFocused ? 'Focused' : 'Not focused'}</Text>;
  }
}

// withNavigationFocus returns a component that wraps TabLabel and passes
// in the navigation prop
export default withNavigationFocus(TabLabel);

Answer 2

React navigation >= 6

React Native Tab Navigation has an option prop as unmountOnBlur . Set it to true and it will reload the tab screens every time you click on tabs.

<Tab.Screen
  initialParams={{ ...params, article: null }}
  options={{
     title: "HomePage",
     unmountOnBlur: true,
  }}
  name="HomePage"
  component={ResenhaPage}
/>