React native 反应本机设置状态重置导航

我正在使用我的应用程序包。但每当我调用setState时，即使我没有传递新的状态更改，底部导航也会重置为第一个选项卡。这是什么原因造成的？示例代码运行得很好，但我一输入setState就把它搞糟了

示例代码：

import React, { Component } from 'react'
import BottomNavigation, { Tab } from 'react-native-material-bottom-navigation'
import Icon from 'react-native-vector-icons/MaterialIcons'

class MyComponent extends Component {
  render() {
    return (
      <BottomNavigation
        labelColor="white"
        rippleColor="white"
        style={{ height: 56, elevation: 8, position: 'absolute', left: 0, bottom: 0, right: 0 }}
        onTabChange={(newTabIndex) => alert(`New Tab at position ${newTabIndex}`)}
      >
        <Tab
          barBackgroundColor="#37474F"
          label="Movies & TV"
          icon={<Icon size={24} color="white" name="tv" />}
        />
        <Tab
          barBackgroundColor="#00796B"
          label="Music"
          icon={<Icon size={24} color="white" name="music-note" />}
        />
        <Tab
          barBackgroundColor="#5D4037"
          label="Books"
          icon={<Icon size={24} color="white" name="book" />}
        />
        <Tab
          barBackgroundColor="#3E2723"
          label="Newsstand"
          icon={<Icon size={24} color="white" name="newspaper" />}
        />
      </BottomNavigation>
    )
  }
}

如果在React组件中调用this.setState，它将重新呈现自身。这意味着，如果您不告诉BottomNavigation应该显示哪个状态，它将重置为默认状态

底部导航的默认状态是将第一个选项卡设置为活动

解决方案 您可以使用activeTab属性定义底部导航的状态

这将使底部导航即使在重新渲染后仍保持其当前状态

也可以在中找到一个示例

class MyComponent extends Component {
  state = { activeTab: 0 }

  handleTabChange = (newTabIndex) => {
    this.setState({ activeTab: newTabIndex })
  }

  render() {
    return (
      <BottomNavigation
        activeTab={this.state.activeTab}
        onTabChange={this.handleTabChange}
      >
        <Tab
          barBackgroundColor="#37474F"
          label="Movies & TV"
          icon={<Icon size={24} color="white" name="tv" />}
        />
        {/* Skipped Tabs for brevity */}
      </BottomNavigation>
    )
  }
}