本机如何在tabBarOnPress上重新渲染刷新屏幕

Question

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

我想在按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')} />
            )
        }
    }

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