安卓 webview在debug下正常显示,打包之后无法显示



  • 在使用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>
        )
      }
    }
    
    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。折回去再看也不行就是出不来


登录后回复