aksonov / aksonov/react-native-tabs

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

Abierto
#47 5 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
727
Forks
112
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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]}
```

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.