Question

我最近将react-navigation更新到了2.18.0版本，而我的部分代码无法再使用了。浏览完文档后，我仍然无法重现以前的功能。

本质上，我希望在调用jumpToIndex之前需要加载统计数据屏幕的所有数据，以便StatsScreen组件可以在render（）之前访问更新的数据。

该功能曾经可以使用，但是现在我得到了“未处理的承诺拒绝：TypeError：jumpToIndex不是函数”。警告。和jumpToIndex从未发生过。

在App.js中，我将TabNavigator更改为createBottomTabNavigator，并对更新进行了必要的更改。

const RootNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeStackNavigator,
    navigationOptions: ({ navigation }) => ({
         //Navigation options here
      ),
    }),
  },
  StatsScreen: {
    screen: StatsScreen,
  },
}, {
  lazy: false,
});

在StatsScreen.js中：

export default class StatsScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
    tabBarOnPress: async (tab, jumpToIndex) => {
      if (!tab.focused) {
        await navigation.state.params.update();
        jumpToIndex(tab.index);
      }
    },
  });

  async componentDidMount() {
    this.props.navigation.setParams({
      update: this._updateStats.bind(this),
    });
  }

  async _updateStats() {
    //logic in this function calls updateData() if needed.
  }

  async _updateData() {
   //Update the data
  }

  render() {
    return (
      // Component JSX ommitted from this example
    );
  }
}

关于需要做什么的任何想法？

Answer 1

我在Andrei Pfeiffer的博客中找到了解决方案：https://itnext.io/handle-tab-changes-in-react-navigation-v2-faeadc2f2ffe

基本上，我将导航选项更改为以下代码：

 static navigationOptions = () => ({
    async tabBarOnPress({ navigation, defaultHandler }) {
      await navigation.state.params.onTabFocus();
      defaultHandler();
    },
  });

onTabFocus（）现在可以执行与updateStats（）相同的工作。

反应导航警告：“ jumpToIndex不是函数”

1 个答案: