2

シーンのトップ レベルに「ロジック コンポーネント」を追加したいと思います。

つまり、私はそれを得ました：

<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 に接続され、それぞれが必要とする独自のレデューサーを取得します。

すなわち:

export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer)

したがって、「ルート」シーンを Redux に接続し、一般的なレデューサー (他のすべてのシーンも依存するもの) を与える必要があります。しかし、それで、私は componentDidUpdate、componentWillReceiveProps、... を使用してリッスンします。つまり、接続が変更されたときに Netinfo を使用して、リデューサーの状態を更新します。

明確かどうかはわかりませんが、そうであることを願っています。さらに情報が必要な場合は、彼らに尋ねてください。

助けてくれてありがとう

解決

アトランテの答えを見て、必要なものがすべて書かれているドキュメントを見てください:) 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 は既に定義されています」などはありません。

4

2 に答える 2

3

次のようなことができます。

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}
 />
于 2016-12-15T12:29:56.683 に答える
0

ストア内のデータを適切に更新している場合、接続されているデータはすべて更新されます。

アクション/レデューサーが実行されているのを確認できても、接続されたコンポーネントが再レンダリングされない場合は、レデューサーで状態を変更している可能性が高く、接続されたコンポーネントはデータの変更に気付かない可能性があります。

ストアで深くネストされたプロパティを変更する場合は、ImmutableJS を強くお勧めします。

于 2016-12-15T14:51:11.557 に答える