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

【问题标题】：react native how to re render refresh screen on tabBarOnPress反应原生如何在 tabBarOnPress 上重新渲染刷新屏幕
【发布时间】：2019-04-07 08:46:59
【问题描述】：

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

我想在标签按下时重新渲染屏幕以刷新屏幕并获取新数据

请看我下面的代码

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

【问题讨论】：

标签： reactjs react-native navigation react-navigation

【解决方案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
  })
}

【讨论】：