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

Question

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

其中一个是聊天屏幕，称为Chat ，包含两个 View :

聊天或帖子的主聊天屏幕

如果未登录，则显示注册和登录按钮。

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

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

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

我的聊天组件是:

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

我的问题是当我在底部TabNavigator 的标签上点击 Chat 时如何刷新整个组件?

didFocus 也不起作用。

Answer 1

您可以使用 高阶组件通过专注 支撑成一个包装的组件。例子:

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