解决方案

Question

我正在为我的应用使用react-native-material-bottom-navigation包。但每当我拨打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>
    )
  }
}

Answer 1

如果您在React组件中调用this.setState()，它将重新呈现自己。这意味着BottomNavigation将重置为默认状态，如果您没有告诉它应显示哪种状态。

底部导航的默认状态是将第一个Tab设置为活动。

解决方案

您可以使用activeTab prop。

定义底部导航的状态

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

即使重新渲染，这也会使底部导航保持在当前状态。

也可以在react-native-material-bottom-navigation/examples中找到一个例子。

react-native setState重置导航

1 个答案:

解决方案