react-navigation之TabNavigator实践

发表于 | 分类于 | 阅读次数
字数统计 336 | 阅读时长 1

参考官网https://reactnavigation.org/docs/intro/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { TabNavigator } from "react-navigation";
class RecentChatsScreen extends React.Component {
  render() {
    return <Text>List of recent chats</Text>
  }
}
class AllContactsScreen extends React.Component {
  render() {
    return <Text>List of all contacts</Text>
  }
}
const MainScreenNavigator = TabNavigator({
  Recent: { screen: RecentChatsScreen },
  All: { screen: AllContactsScreen },
});

官方例子很清晰，就是在两个tabbar之间切换，但是tabbar只设置了label,没有设置icon，然而我实践时添加了icon后，发现悲剧了，每次点击tabbar切换时，都有一秒左右的延迟，体验效果很不好，开始以为是因为icon和title一起显示的问题，后来只显示其中之一也会有延迟，但是看官网的expo展示却很流畅；接下来几天中我都在网上找人人问问题，结果居然根本没人提过这个问题，不死心的我又去看源码，但是源码中也没有写延迟的属性，后来无意中发现在开发模式下启用Debug js Remotely也就是启用浏览器debug，居然延迟就没了，据此我不禁想如果打成release包，是不是也不会延迟呢，最终发现在release包中真的没有延迟，问题虽然解决了但是我还是费解，为什么在调试模式时tabbar切换会有延时呢，这是个问题！特此说明以上延迟问题针对的是android。

0%