反应原生如何在tabBarOnPress上重新呈现刷新屏幕

时间:2019-04-07 08:46:59

标签: reactjs react-native navigation react-navigation

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

我想在按Tab键时重新渲染屏幕以刷新屏幕并获取新数据

请参见下面的代码

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')} />
            )
        }
    }

1 个答案:

答案 0 :(得分:1)

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

如果未重新渲染屏幕,请检查this线程。您可以使用tabBarOnPress prop来调用任何组件方法。

您也可以尝试以下解决方案:

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