react native 调试下良好,打包之后 tab-view中initpage webview无法显示出来?

发布于 2022-09-05 23:48:40 字数 5113 浏览 10 评论 0

在使用react-native-scrollable-tab-view这个组件。每一个tab嵌套了一个webview地图。安卓debug下每一个tab都可以都正常显示,打包apk之后有一点问题进入该页面的第一个都无法显示。webview的html我是直接const了一个常量。script代码 采用的componentDidMount下通过inject注入的方法。实现的。在调试下一点问题没有。打包之后 每次打开第一个tab都无法显示。
eg:有1,2,3,4,5 五个tab。在调试下都正常显示。打包apk之后。传入的initpage=2.tab2空白,1,3,4,5有地图。(进来 initpage那一个tab是空白。其他tab都ok。)不知道为什么求解。
入口

   let dayList = this.state.bookData.map((result, i, arr) => {
      let day = 'D' + result.day
      let aDayMapContent = Platform.OS === 'ios' ? <ADayMap
        {...this.props}
        tabLabel={day}
        oneDayData={arr[i].all_axis}
        key={i}
          /> : <ADayMapAndroid
            {...this.props}
            tabLabel={day}
            oneDayData={arr[i].all_axis}
            key={i}
          />
      return aDayMapContent
    })
    var dateArr = this.getDateArr()
    return (
      <View style={styles.container}>
        <NavigationBar
          titleView={this.renderTitleView()}
          leftButton={ViewUtils.getLeftButton(() => this.goBack())}
        />
        <ScrollableTabView
          locked
          tabBarBackgroundColor='#FFF'
          tabBarUnderlineStyle={{height: 0}}
          renderTabBar={() => <ScrollableTabBar test={dateArr} />}
          initialPage={this.state.initialPage}
        >
          { dayList }
        </ScrollableTabView>
      </View>
    )
  }
}

ADayMapAndroid.js

export default class ADayMapAndroid extends Component {
  constructor (props) {
    super(props)
    this.state = {
      allAxis: this.props.oneDayData
    }
    this.uluru = this.state.allAxis[0]
    this.axisArray = []
    this.markerInfoArray = []
    for (let i = 0; i < this.state.allAxis.length; i++) {
      if (this.state.allAxis[i].type !== 'flight' &&
      this.state.allAxis[i].type !== 'line' &&
      this.state.allAxis[i].type !== 'tip' &&
      this.state.allAxis[i].type !== 'roadtrip') {
        let temp = {lat: parseFloat(this.state.allAxis[i].axis[0]), lng: parseFloat(this.state.allAxis[i].axis[1])}
        this.axisArray.push(temp)
        let tempMarker = this.state.allAxis[i]
        if (!this.state.allAxis[i].address) {
          tempMarker.address = ''
        } else {
          tempMarker.address = '<div style="margin-top:8px; color: #433834;">' + '<b>地址:</b>' + this.state.allAxis[i].address + '</div>'
        }
        this.markerInfoArray.push(tempMarker)
      }
    }
  }
  componentDidMount () {
    // console.log(JSON.stringify(this.axisArray))
    this.webview.injectJavaScript(`
    var labels = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'];
    var iconBase = 'https://uniqueway-document.b0.upaiyun.com/app/uniqueway/newplaceIcon.png';
    function initMap() {
      var uluru = ${JSON.stringify(this.axisArray[0])};
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru,
        disableDefaultUI: true,
        zoomControl: true
      });
      var bounds = new google.maps.LatLngBounds ();
      var markArr = [];
      ${JSON.stringify(this.axisArray)}.forEach(function(feature,i) {
        var marker = new google.maps.Marker({
          position: feature,
          map: map,
          label: {
            text: labels[i % labels.length],
            color: 'white'
          },
          icon: iconBase
        });
        bounds.extend (feature);
        markArr.push(marker);
      });
      map.fitBounds (bounds);
      var flightPath = new google.maps.Polyline({
        path: ${JSON.stringify(this.axisArray)},
        geodesic: true,
        strokeColor: '#2eb872',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
  
      flightPath.setMap(map);
        for (let i = 0; i < markArr.length; i++) {
          let infowindow = new google.maps.InfoWindow({
            content: '<div style="margin-top:8px; color: #433834;">'+ '<b>时间:</b>' + ${JSON.stringify(this.markerInfoArray)}[i].start_time + '-' + ${JSON.stringify(this.markerInfoArray)}[i].end_time + '</div>' +
              '<div style="margin-top:8px; color: #433834;">'+ '<b>名称:</b>' + ${JSON.stringify(this.markerInfoArray)}[i].name + '</div>' +
              ${JSON.stringify(this.markerInfoArray)}[i].address
            });
            markArr[i].addListener('click', function() {
            infowindow.open(map, markArr[i]);
          });
        }
    }
    `)
  }
  render () {
    return (
      <View style={styles.container}>
        <WebView
          source={{html: html}}
          ref={webview => { this.webview = webview }}
        />
        <View
          style={styles.showTextWrapper}
        >
          <Text
            style={styles.showText}
          >点击数字可查看详情</Text>
        </View>
      </View>
    )
  }
}

困扰好久了 很奇怪~~ 就是一进来那个tab无法加载 两边tab都ok 从1进来 2,3,4,5ok,从2进来1,3,4,5ok。折回去再看也不行就是出不来

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文