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

Question

我想在场景的顶层添加一些“逻辑组件”。

我明白了:

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

所以，我需要做的是将“根”场景连接到 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);

它基本上是我之前尝试过的所有东西的混合体，而且效果很好!没有“Key xxx is already defined”之类的。

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 连接到状态，它会分派(dispatch)它所做的导航:

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