时间戳

首页 > 解决方案 > 反应原生如何在 tabBarOnPress 上重新渲染刷新屏幕

reactjs - 反应原生如何在 tabBarOnPress 上重新渲染刷新屏幕

问题描述

在我关闭应用程序并再次打开之前，屏幕不会获取新数据

我想在选项卡上重新渲染屏幕以刷新屏幕并获取新数据

请看我下面的代码

const DashboardTabNavigator = createBottomTabNavigator({

    Home: { screen: Home,
        navigationOptions: {
            tabBarIcon: (
                <Image style={{ width: 30, height: 30,tintColor:'white' }}
                       source={require('./assets/IconBootomTabNavigation/home_icon.png')} />
            )
        }
    },
    Category: { screen: Category,
        navigationOptions: {


            tabBarIcon: (
                <Image style={{ width: 30, height: 30,tintColor:'white' }}
                       source={require('./assets/IconBootomTabNavigation/cat_icon.png')} />
            )
        }
    }

标签： reactjsreact-nativenavigationreact-navigation

解决方案

我建议您将负责获取数据的代码放在componentDidMount生命周期方法中。这样，您可以确保在初始渲染后获得数据。

如果屏幕没有被重新渲染，请检查这个线程。您可以使用tabBarOnPress 属性调用任何组件方法。

你也可以试试这个解决方案：

static navigationOptions = ({navigation}) => {
  return {
    tabBarOnPress: (tab, jumpToIndex) => {
      if(!tab.focused) {
        jumpToIndex(tab.index);
        navigation.state.params.onFocus()
      }
    },
  }
}

componentDidMount() {
  this.props.navigation.setParams({
    onFocus: your-data-fetching-method
  })
}

推荐阅读