顶级组件 root-Scene/Router react-native-router-flux
Top level component root-Scene/Router react-native-router-flux
我想在我的场景的顶层添加一些 "logic-component"。
即我明白了:
<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)
所以,我需要做的是将 "root" 场景连接到 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" 或任何东西。
你可以这样做:
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);
编辑 - 避免键已经定义
为了避免key已经定义,你可以使用:
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}
/>
如果您正在正确更新商店中的数据,任何连接的数据都应该刷新。
如果您可以看到 actions/reducer 运行 但连接的组件从未重新渲染,那么您很可能在 reducer 中改变了状态并且连接的组件从未注意到数据更改。
如果您要修改商店中深层嵌套的属性,那么我强烈建议使用 ImmutableJS。
我想在我的场景的顶层添加一些 "logic-component"。
即我明白了:
<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)
所以,我需要做的是将 "root" 场景连接到 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" 或任何东西。
你可以这样做:
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);
编辑 - 避免键已经定义
为了避免key已经定义,你可以使用:
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}
/>
如果您正在正确更新商店中的数据,任何连接的数据都应该刷新。
如果您可以看到 actions/reducer 运行 但连接的组件从未重新渲染,那么您很可能在 reducer 中改变了状态并且连接的组件从未注意到数据更改。
如果您要修改商店中深层嵌套的属性,那么我强烈建议使用 ImmutableJS。