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

Question

我正在使用 react-navigation 版本 3，我有底部选项卡导航器，有 4 个选项卡。

其中一个是聊天屏幕，称为 as Chat，包含两个视图：

1. 聊天或帖子的主聊天屏幕

2. 如果未登录，则显示用于注册和登录的按钮。

当点击注册或登录时，将进入相应的登录或登录屏幕。

但是从登录/登录页面，当我点击底部选项卡导航器时Chat，它应该再次重新加载并检查用户是否登录？

问题是当我从我的选项卡导航到登录/登录页面时，它不会刷新或再次调用或重新安装。

1. 我的聊天组件是：

   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>
     }
   

我的问题是当我点击 bottomTabNavigator 的选项卡时如何刷新整个组件Chat？

didFocus 也不起作用。

Answer 1

反应导航 >= 6

React Native Tab Navigation 有一个 option prop 作为unmountOnBlur。将其设置为true，每次单击选项卡时都会重新加载选项卡屏幕。

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

Answer 2

您可以使用高阶组件，将isFocused属性传递到包装组件中。例子：

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);