Question

我想添加一些＆＃34;逻辑组件＆＃34;到了我的场景的顶层。

即我知道了：

<Router>
    <Scene key="root" hideNavBar={true}>
        <Scene key="home" component={HomeContainer} />
        <Scene key="search" component={SearchContainer} />
        <Scene key="list" component={ListContainer} />
        ...
    </Scene>
</Router>

每个容器使用connect（）（）连接到Redux，每个容器都有自己需要的reducer。

即：

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer)

所以，我需要做的是连接＆＃34; root＆＃34;场景到Redux并给它一般的reducer（也是所有其他场景所依赖的）。但有了这个，我想使用componentDidUpdate，componentWillReceiveProps，...来监听，即连接发生变化时的Netinfo，以更新reducer的状态。

我不确定它是否清楚，我希望是这样。如果您需要更多信息，请询问他们。

感谢您的帮助

解决方案

看看atlanteh的答案，然后看看它说的一切所需的文件:) https://github.com/aksonov/react-native-router-flux/tree/master/docs

我的最终解决方案是一切按预期工作：

const ConnectedRouter = connect()(Router)

const scenes = Actions.create(
    <Scene key="root" hideNavBar={true}>
        <Scene key="home" component={HomeContainer} />
    </Scene>
)

class ReduxRouter extends Component {
  componentWillReceiveProps(newProps) {
      if(!newProps.isConnected) {
          // logic
      }
  }
  render() {
    return (
      <ConnectedRouter scenes={scenes} {...this.props}/>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    // State
  }
}

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({
    // Actions
  }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(ReduxRouter);

它基本上是我以前尝试的所有东西的组合，它的效果非常好！否＃34;密钥xxx已经定义＆＃34;或者无论如何。

Answer 1

您可以这样做：

class MyRouter extends React.Component {
    componentWillReceiveProps(newProps) {
        if(!newProps.network.isActive) {
            // do something here
        }
    }
    render() {
        <Router>
            <Scene key="root" hideNavBar={true}>
                <Scene key="home" component={HomeContainer} networkActive={this.props.network.isActive} />
                <Scene key="search" component={SearchContainer} />
                <Scene key="list" component={ListContainer} />
                ...
            </Scene>  
        </Router>  
    }
}
const mapStateToProps = state => state;
export default connect(mapStateToProps)(MyRouter);

并且您将此组件作为路由器，因此现在您有一台连接到该状态的路由器。

请注意，您还可以将react-native-router-flux连接到状态，它将调度它所执行的导航：

const ConnectedRouter = connect()(Router);

修改 - 避免已定义的密钥

要避免已定义的密钥，您可以使用：

const scenes = Actions.create(
   <Scene key="root" hideNavBar={true}>
        <Scene key="home" component={HomeContainer} networkActive={this.props.network.isActive} />
        <Scene key="search" component={SearchContainer} />
        <Scene key="list" component={ListContainer} />
        ...
    </Scene>  
)

然后在路由器中：

<ConnectedRouter
   scenes={scenes}
 />

Answer 2

如果要正确更新商店中的数据，则应刷新所有连接的数据。

如果您可以看到actions / reducer正在运行但连接的组件永远不会重新渲染，那么您很可能会在reducer中改变状态，并且连接的组件从不会注意到数据更改。

如果您要在商店中修改深层嵌套属性，那么我强烈建议使用ImmutableJS。

顶级组件root-Scene / Router react-native-router-flux

2 个答案: