Open Sunshine168 opened 6 years ago
请问一下,集成redux的react-navigation-is-focused-hoc,如何与通过connect的组件混合使用?
@z5980000 不是很理解问题,你可以举场景。 这种混用所指是什么? 因为套了react-navigation-is-focused-hoc以后还是一个组件,也是可以继续connect的
@Sunshine168 类似于withNavigationFocus(connect(mapStateToProps, mapDispatchToProps)(MyProjectScreen), 'MyProjectScreen')这种,现在遇到的问题是,在react-navigation-is-focused-hoc中,确实把state.isFocused设为true了,但是我在自己的MyProjectScreen中用this.props.isFocused还是false
@z5980000 你把顺序改一下试试,然后确定下screen的名字有没有问题
connect(mapStateToProps, mapDispatchToProps)(withNavigationFocus(MyProjectScreen), 'MyProjectScreen')
@Sunshine168 用了这种方式后,还是false,我在自己的组件中使用时,大概是在什么时机使用,render里面还是componentWillReceiveProps,又或者是其他地方?
@Sunshine168 通过调试可以看出,我自己组件里的componentWillReceiveProps会比用withNavigationFocus包装好的组件的componentWillReceiveProps方法先执行,是不是我使用的地方不太对?
@z5980000 确保一下sceen名字有没有错误,在哪里都可以使用的,本质也是通过props,或者你发你代码到我邮箱吧,我下班到家看看
@Sunshine168 我先自己再看看,实在搞不定再麻烦你,你这个实现很酷
前言
这里是针对日常使用react-navigation中的遇到的一些问题对其进行解决而总结出的小技巧。
TabNavigator 和 StackNavigator
简单了解一下 StackNavigator
如其名就是一个栈,遵循先进后出的原则,每打开一个screen,screen就会在页面最顶层的位置。
简单了解一下TabNavigator
在初始化TabNavigator的时候就会将TabNavigator上的所有screen都进行初始化。通过左右滑动/点击底部的TabBar对应的icon项目进行切换。
而一个TabNavigator也可以作为一个screen放入到StackNavigator中。
在了解了其简单使用原理后,进入到日常可能会遇到的一些问题。
TabNavigator的子screen缺少一些额外的钩子
由于TabNavigator会在第一次加载的时候实例化其子screen,所以其所以子screen的
componentDidMount()
会随着TabNavigator实例的时候执行。 于是就有了这样的需要,子screen在屏幕上的时候才向服务器请求数据,或者是更新数据等逻辑。 目前react-navigation并没有提供相关的钩子去帮助我们(见#51),所以我们就有需要去使用一些高阶组件为我们的screen添加一些hook。 如https://github.com/pmachowski/react-navigation-is-focused-hoc 这里提供一个在集成redux后自己实现的一个方案通过抛出引玉可以为相关的其他钩子实现提供思路
实现一个自定义的tabbar
为什么会有这个需求,因为设计师总会各种新(sao)的想(cao)法(zuo),例如issues上看到的这个图
这里之前实践的例子
stackNavigator登录后通过状态刷新screen
由于登录后一般是将登录页reset即将上面的screen直接出栈,而下面的screen是直接呈现在页面上面,而在单一数据流,有时候没有触发其刷新的数据,此时就通过加一个高阶函数
重置 stack状态
在上面提到了重置stack状态
替换screen