aksonov / aksonov/react-native-tabs

With router-flux: Tab re-renders one more time

未关闭
#47 5 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
主要语言
JavaScript
星标
727
派生
112
PR 合并指标
30 天内没有已合并 PR

描述

Using:
react-native-router-flux@3.36.0
react-native-tabs@1.0.9
react-native@0.35.0
react@15.3.2

![Demo](http://i.giphy.com/3oriNKBU7U4Q3Z05z2.gif)

Description:
1. start app, renders tab "Feed" initially
2. switch to "Tab #2" and then back to "Feed" - this re-renders tab "Feed"
3. switching to second and back to initial tab does not re-render tab "Feed" again

I expect tabs to not re-render, but I think this is caused by tab 2 being rendered after clicked (and forces tab 1 to re-render as well). Is there an option to automatically render all tabs at start? Or is this behavior caused by something else? I've attached all that might be helpful, sorry if this post is very long.

Scenes:

``` js
//...
class AppNavigator extends React.Component
{
render()
{
return



Actions.pop()} title="Back" icon={TabIcon} />





Actions.refresh({key: 'drawer', open: value => !value })} />








}
}

function mapDispatchToProps(dispatch)
{
return bindActionCreators(ActionCreators, dispatch);
}

export default connect((state) => {
return {}
}, mapDispatchToProps)(AppNavigator);
```

Page1.js (Feed tab):

``` js
//...
class Page1 extends Component
{
_addRecipe()
{
this.props.addRecipe();
}

componentDidMount()
{
this.props.fetchPosts();
}

render()
{
console.log('page1props', this.props);

return

Page1

this._addRecipe()}>Add recipe
Recipe count: {this.props.recipeCount}
Actions.auth()}>Goto login
{this.props.posts.length > 0 && this.props.posts.map((value, key) => {
postAnimationDelay += postAnimationIteration;

return
Actions.detail({
post: value
})}>
{value.title}


})}
Actions.detail()} style={{marginTop:40}}>asdf

}
}

export default connect((state) => { // state == global state
return {
routes: state.routes,
searchedRecipes: state.searchedRecipes,
recipeCount: state.recipeCount,
posts: state.posts
}
}, (dispatch) => bindActionCreators(ActionCreators, dispatch))(Page1);
```

Page2.js (Tab #2):

``` js
//...
class Page2 extends Component
{
_removeRecipe() { this.props.removeRecipe(); }

render()
{
return

Page2

this._removeRecipe()}>Remove recipe
Recipe count: {this.props.recipeCount}
Actions.auth()}>Goto login

}
}

export default connect((state) => { // state == global state
return {
routes: state.routes,
searchedRecipes: state.searchedRecipes,
recipeCount: state.recipeCount
}
}, (dispatch) => bindActionCreators(ActionCreators, dispatch))(Page2);
```

Console ouput of Demo GIF:

```
Running application App ({
initialProps = {
};
rootTag = 1;
})
Running application "App" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
fetching url https://...
action @ 13:06:08.324 REACT_NATIVE_ROUTER_FLUX_FOCUS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
action @ 13:06:08.336 REACT_NATIVE_ROUTER_FLUX_FOCUS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
action @ 13:06:08.749 REACT_NATIVE_ROUTER_FLUX_REFRESH
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
action Object {key: "0_drawer", open: false, type: "REACT_NATIVE_ROUTER_FLUX_REFRESH"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
action @ 13:06:08.753 REACT_NATIVE_ROUTER_FLUX_FOCUS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
response Object {limit: 10, offset: 0, data: Array[10], single_result: false}
action @ 13:06:09.151 SET_POSTS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[0]}
action Object {type: "SET_POSTS", posts: Array[10]}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:38.433 REACT_NATIVE_ROUTER_FLUX_JUMP
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {key: "Page2", type: "REACT_NATIVE_ROUTER_FLUX_JUMP"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:38.438 REACT_NATIVE_ROUTER_FLUX_FOCUS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:38.469 REACT_NATIVE_ROUTER_FLUX_FOCUS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:40.121 REACT_NATIVE_ROUTER_FLUX_JUMP
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {key: "Page1", type: "REACT_NATIVE_ROUTER_FLUX_JUMP"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:40.125 REACT_NATIVE_ROUTER_FLUX_FOCUS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:40.137 REACT_NATIVE_ROUTER_FLUX_FOCUS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
fetching url https://...
response Object {limit: 10, offset: 0, data: Array[10], single_result: false}
action @ 13:06:41.602 SET_POSTS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {type: "SET_POSTS", posts: Array[10]}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:50.044 REACT_NATIVE_ROUTER_FLUX_JUMP
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {key: "Page2", type: "REACT_NATIVE_ROUTER_FLUX_JUMP"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:50.048 REACT_NATIVE_ROUTER_FLUX_FOCUS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:50.062 REACT_NATIVE_ROUTER_FLUX_FOCUS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:50.919 REACT_NATIVE_ROUTER_FLUX_JUMP
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {key: "Page1", type: "REACT_NATIVE_ROUTER_FLUX_JUMP"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:50.926 REACT_NATIVE_ROUTER_FLUX_FOCUS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action @ 13:06:50.947 REACT_NATIVE_ROUTER_FLUX_FOCUS
prev state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
action Object {scene: Object, type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}
next state Object {searchedRecipes: Object, recipeCount: 17, routes: Object, posts: Array[27261]}
```

贡献指南

这个仓库没有索引到贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。