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