自定义导航栏

在开发小程序的时候没有使用开发者工具，用的H5。想要有一个自定义的底部导航栏，所以就尝试了一下taro中的自定义导航栏。结果配置之后，直接让页面显示不出来内容了。

随后查询官网后，自定义导航栏好像只支持微信小程序的。H5的应该是没有的，把这段代码删掉之后就可以正常显示了。好烦！！！

在自定义导航栏时，应该由导航栏组件自行控制页面的变更和导航栏的状态变化。在taro中使用useDidShow这个生命周期Hook，通过页面显示，判断当前路由，并根据当前路由设置activeTab。在点击导航栏跳转页面时，使用redirectTo进行跳转。

  useDidShow(() => {
    const pages = Taro.getCurrentPages();
    const current = pages[pages.length - 1];
    const route = current.route;
    const matched = tabList.find((tab) => tab.pagePath === route);
    if (matched) {
      setActiveTab(matched.id);
    }
  });

  const switchTab = (tab) => {
    if (activeTab !== tab.id) {
      Taro.redirectTo({ url: tab.pagePath });
    }
  };

页面报错或者无渲染

页面报错类型

这通常是因为Taro无法识别到正确的页面组件。当使用react进行开发时，成为页面的那个组件需要默认导出 export default functoin Index(){return <></>}并且要在app.config.ts中配置正确的路由信息。

如果出现页面白屏没有节点渲染并且控制台没有出现报错的情况，这可能是因为组件需要接收的外部组件传来的数据为空或者是属性不匹配导致的。在使用的时候需要注意组件中的数据安全兜底，进行判空。

// 如果外部组件没有传入post，那么就不会渲染到页面上。（这是一个嵌入到页面中的组件）
export function Index(post){
    return (
        <div>{post.msg}</div>
    )
}