关于Taro 2.X H5部分页面（pop、replace、switchTab操作）导致出现白屏的临时解决方案

[jerrylu0522]

相关平台

H5

复现仓库

https://github.com/
浏览器版本: 任意
使用框架: React

复现步骤

部分页面出现白屏的操作步骤
1、设置三个Tab bar，和一个可navigate的页面，并在第三个Tab设置一个navigateTo到该页面的按钮
2、随意多次切换三个Tab bar，然后进入第三个Tab，点击navigateTo按钮
3、进入页面后进行浏览器返回操作
4、返回的页面呈现底色白屏

原因分析：
1、导致白屏的原因是因为taro采用的.taro_page在router处理时未能删除该page的display:none style。

期望结果

删除route页display:none

实际结果

display:none 未删除

环境信息

Taro CLI 2.2.10 environment info:
    System:
      OS: macOS 10.15.2
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.6.0 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.5 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 2.2.10 => 2.2.10 
      @tarojs/components-qa: 2.2.10 => 2.2.10 
      @tarojs/mini-runner: 2.2.10 => 2.2.10 
      @tarojs/plugin-sass: 2.2.10 => 2.2.10 
      @tarojs/router: 2.2.10 => 2.2.10 
      @tarojs/taro: 2.2.10 => 2.2.10 
      @tarojs/taro-alipay: 2.2.10 => 2.2.10 
      @tarojs/taro-h5: 2.2.10 => 2.2.10 
      @tarojs/taro-qq: 2.2.10 => 2.2.10 
      @tarojs/taro-quickapp: 2.2.10 => 2.2.10 
      @tarojs/taro-rn: 2.2.10 => 2.2.10 
      @tarojs/taro-swan: 2.2.10 => 2.2.10 
      @tarojs/taro-tt: 2.2.10 => 2.2.10 
      @tarojs/taro-weapp: 2.2.10 => 2.2.10 
      @tarojs/webpack-runner: 2.2.10 => 2.2.10 
      eslint-config-taro: 2.2.10 => 2.2.10 
      eslint-plugin-taro: 2.2.10 => 2.2.10 
      nerv-devtools: ^1.5.7 => 1.5.7 
      nervjs: ^1.5.7 => 1.5.7 
      stylelint-config-taro-rn: 2.2.10 => 2.2.10 
      stylelint-taro-rn: 2.2.10 => 2.2.10

---

补充信息

项目临时解决方案：
修改 node_modules/@tarojs/router/dist/index.esm.js

第一处修改：
在「
key: "render",
value: function render() {
if (!this.wrappedComponent) return null;
var WrappedComponent = this.wrappedComponent;
return Nerv.createElement("div", {
className: "taro_page",
」
修改为「
key: "render",
value: function render() {
if (!this.wrappedComponent) return null;
var WrappedComponent = this.wrappedComponent;
return Nerv.createElement("div", {
className: "taro_page",
"data-page": this.props.path,
」
*此处添加“data-page”是为了后续可查询出该页面

第二处修改：
在【key: "pop"】、【key: "replace"】、【key: "switch"】的value function中最后【this.setState】函数的后面加入
「
setTimeout(() => {
let pages = document.querySelectorAll('.taro_page')
for (let i = 0; i < pages.length; i ) {
const element = pages[i];
if (element.getAttribute('data-page') === toLocation.path) {
element.style.display = 'block'
break
}else{
element.style.display = 'none'
}
}
}, 200)
」
*此处添加“这个timeout function”1是为了异步for循环，2是为了对实际页面修复删除display:none
注意:key:push无需修改，目前经测试push操作不影响展示

[jerrylu0522]

只适用H5、只适用H5、只适用H5

项目临时解决方案：
修改 node_modules/@tarojs/router/dist/index.esm.js

第一处修改：
在

`

key: "render",
value: function render() {
  if (!this.wrappedComponent) return null;
  var WrappedComponent = this.wrappedComponent;
  return Nerv.createElement("div", {
    className: "taro_page",

`

修改为

`

key: "render",
value: function render() {
  if (!this.wrappedComponent) return null;
  var WrappedComponent = this.wrappedComponent;
  return Nerv.createElement("div", {
    className: "taro_page",
    "data-page": this.props.path,

`

此处添加“data-page”是为了后续可查询出该页面

第二处修改：
在【key: "pop"】、【key: "replace"】、【key: "switch"】的value function中最后【this.setState】函数的后面加入

`

 setTimeout(() => {
    let pages = document.querySelectorAll('.taro_page')
    for (let i = 0; i < pages.length; i++) {
      const element = pages[i];
      if (element.getAttribute('data-page') === toLocation.path) {
        element.style.display = 'block'
        break
      }else{
        element.style.display = 'none'
      }
    }
  }, 200)

`
*此处添加“这个timeout function”1是为了异步for循环，2是为了对实际页面修复删除display:none
经过测试，key:push(navigateTo)未出现相关问题，无需添加。

[konghuawei]

我的解决方案是这样的【也是暂时的】：
#6878;

[jerrylu0522]

经过多次测试，建议【key: "pop"】、【key: "replace"】、【key: "switch"】、【key: "push"】都加上。因为用户浏览器操作前进会触发push函数

[Chen-jj]

提个 PR 咯

[justrustc]

我试了一下，通过url直接访问二级链接，然后switchTab到tab页，display none是去掉了，但是页面没有渲染数据，不知道什么情况，我用了customRoutes

[zula1994]

大佬提个pr吧。。。快点改了我们不用纠结这个了

[shenghanqin]

我也跟一下吧。我也提过类似的tabBar的bug。

[ZakaryCode]

和 #6878 问题重复，在 #7344 中修复该问题

[Daviiij]

我项目版本是2.2.16。 h5项目在注销账号之后跳转页面会出现白屏的问题 必现！
使用Taro.navigateBack({ delta: 1 }); 会回到相应的tabs页面但是display为none 所以页面空白
如果我先redirect回首页就不会出现白屏的问题.....