Redux & NavigatorIOS 不会在 react-native 中更新子视图中的状态？

Question

如何使 redux 更新包含在 NavigatorIOS 中的主视图和细节视图？

"大纲"和"细节"视图都不会更新：

主视图> 选项卡栏> 选项卡栏项> 导航器IOS> 主菜单>详细信息

其他 TabBarItem 使用 redux 工作得很好。 例如：

主视图> 选项卡栏 选项卡栏项>视图配置文件

  <Icon.TabBarItem
  style={{borderColor:'red', borderWidth:0}}
  {...this.props}
  iconName="timeline"
  title="View"
  selected={this.state.selectedTab === 'viewTab'}
  onPress={() => {
    this.setState({
      selectedTab: 'viewTab',
      presses: this.state.presses + 1
    });
  }}>
  <ViewProfile {...this.props} />
  </Icon.TabBarItem>

此主视图>选项卡栏>选项卡栏项>导航器IOS>主菜单>详细信息不会更新：

<Icon.TabBarItem
style={{borderColor:'red', borderWidth:0}}
title={'Menu'}
iconName="more-vert"
selected={this.state.selectedTab === 'moreTab'}
onPress={() => {
  this.setState({
    selectedTab: 'moreTab',
  });
}}>
<View style={ss.container}>
<NavigatorIOS
ref="nav"
style={ss.container}
{...this.props}
initialRoute={{
  title: 'Master Menu',
  component: MasterMenu,
  passProps: {
    ...this.props,
  },
}}
/>
</Icon.TabBarItem>
</TabBarIOS>

这就是我连接道具并将其传递到包含 NaigatorIOS> MasterMenu> 详细信息的主视图

的方式

文件：主应用.js

class MainApp extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    console.log('****** MainApp::render ****');
    const { state, actions } = this.props;
    return (
      <MainView
        {...this.props} />
    );
  }
}
// mapStateToProps
function mapStoreStateToComponentProps(state) {
  return {
    state: state.appState,
  };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Object.assign({}, appActions), dispatch),
  }
}
export default connect(
  mapStoreStateToComponentProps,
  mapDispatchToProps
)(MainApp)

我可以向下钻取到包含主菜单>详细信息菜单视图的 NavigatorIOS，在详细信息视图中调用操作、状态更改以及 TabBarIOS 更新中的所有其他视图。 但是，<NavigatorIOS>中包含的主视图和细节视图中的 redux 状态保留其原始值。

通行证不是这样做的方法吗？

或者，是否有其他侦听或订阅方法可供主视图和子视图在数据存储状态更改时进行更新？

Answer 1

NavigatorIOS 的已知问题

NavigatorIOS 不会在场景更改时重新渲染场景passProps。

通过在层次结构中的较低点连接 redux 来绕过

您可以通过将组件MasterMenu与 redux 连接而不是 MainView 来绕过此问题。

Answer 2

@purii的建议解决了我的问题。

我为加载到 NavigatorIOS 组件中的"母版视图"组件创建了一个包装器。

我还为所有从"主视图"组件向下钻取的所有"子视图"组件创建了包装器。这看起来很丑陋和错误，但它有效。使用NavigatorIOS passProps似乎破坏了redux更新。

var React = require('react-native');
var {
  Component,
} = React;

import {bindActionCreators} from 'redux';
import { connect } from 'react-redux';
import * as appActions from '../actions/appActions';
var MasterListView = require('../../MasterListView');
class MasterListWrapper extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    console.log('****** PlanList::render ****');
    return (
      <MasterListView {...this.props} />
    );
  }
}
// mapStoreStateToComponentProps would be a more descriptive name for mapStateToProps
function mapStateToProps(state) {
  return {
    state: state.appState,
  };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Object.assign({}, appActions), dispatch),
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MasterListWrapper)

然后我传递MasterListWrapper作为NavigatorIOS组件：

<Icon.TabBarItem
style={{borderColor:'red', borderWidth:0}}
title="Plan"
iconName="list"
selected={this.state.selectedTab === 'planTab'}
onPress={() => {
  this.setState({
    selectedTab: 'planTab',
    presses: this.state.presses + 1
  });
}}>
<View style={ss.container}>
<NavigatorIOS
ref="nav"
style={ss.container}
initialRoute={{
  title: 'Field Planner',
  component: MasterListWrapper,
  passProps: {
  },
}}
/>
</View>
</Icon.TabBarItem>

在MasterListView中，我需要添加componentWillReceiveProps，以使我的ListView在redux状态更改时重新渲染。

  componentWillReceiveProps: function(nextProps) {
    this.setState({
      // Force all rows to render
      dataSource: ds.cloneWithRows(nextProps.state.waypointItemList),
    });
  },

这可能不是最好的方法。我将寻找更好的方法。

然而，在我学习javascript和react-native的这一点上，我很高兴它奏效了。

Redux非常酷。 我有多个选项卡。 我可以转到菜单并更改设置，例如，将单位从英尺更改为米，然后重新渲染我的所有视图。