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

Question

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

其中一个是聊天屏幕，称为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

您可以使用高阶组件，它将 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);

Answer 2

反应导航 >= 6

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

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