在 React Native Redux 中更新状态后的空白屏幕

Question

我在第一次渲染它时得到Home 组件，但是当我更改componentDidMount HomeComponent 中的状态时，HomeComponent 再次导航 HomeComponent 然后进入一个空白页面。它与_renderScene 逻辑无关。

如果我只是在 _renderScene 中 return <Home>，它在 componentDidMount() 之后仍然给我空白屏幕

import { actions as navActions } from 'react-native-navigation-redux-helpers';


class HomeContainer extends Component {

  _renderScene(sceneProps) {
    return <Home />
  }

  componentDidMount() {
    this.props.dispatch(navActions.jumpTo(1, "main"))
    // Works when
    // this.props.dispatch(navActions.jumpTo(1, "home")
    // Here I change the state of homeNavigation.
  }

  render() {
    return (
      <NavigationCardStack
        navigationState={this.props.homeNav}
        renderScene={this._renderScene.bind(this)}
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    mainNav: state.mainNavigation,
    homeNav: state.homeNavigation
  };
}

当我更改 homeNav this.props.dispatch(navActions.jumpTo(1, "home")) 的状态时，它可以工作， 但是当我在第一次渲染<Home /> 后按照上面的代码更改 mainNav 时，它会再次导航并进入空白屏幕'。

Answer 1

如您的代码中所述，当您在 componentDidMount() 方法中调度操作时，例如：

this.props.dispatch(navActions.jumpTo(1, "main"))

那么您的 mapStateToProps() 方法只接收 mainNav 属性，而 homeNav 在此更新时具有 nil 或空白值。收到 mainNav 后，您的 render() 方法正在执行，并且在您的渲染中，您正在传递 homeNav，它当前为 nil 或空白：

<NavigationCardStack
        navigationState={this.props.homeNav}
        renderScene={this._renderScene.bind(this)}
      />

通过值为空白或 nil，它不会在您的 Home 组件上重定向并显示空白屏幕。在这种情况下，您应该使用 mainNav，或者也应该将 mainNav 与 homeNav 一起传递。谢谢！