頂級組件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);

它基本上是我之前嘗試過的所有內容的組合，而且效果很好！ 沒有“鍵xxx已定義”或任何形式。

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

如果要正確更新存儲中的數據，則所有刷新的數據都應刷新。

如果您可以看到動作/減速器正在運行，但是連接的組件從未重新渲染，則很可能是減速器中的狀態發生了變化，並且連接的組件從未注意到數據更改。

如果要在商店中修改深層嵌套的屬性，那么我強烈建議使用ImmutableJS。