最近项目中遇到一个问题,代码如下,点击进入另一个页面时需要显示的图片会黑屏,另外退回到该页面的时候下面代码中的第一个图片会全黑几秒才渲染,从另一个路径进入该页面时并没有此问题,就找了半天是不是数据的问题,结果并不是,对比两边的代码,发现多了一个TouchableOpacity的组件。将该组件去掉不存在该问题了。
<TouchableHighlight underlayColor='#dddddd' onPress={this._stuInfo.bind(this,rowData.studentid,rowData.id,photo)}> <View style={styles.follList}> <View style={styles.studentItem}> <Image source={photo} style={styles.photo}/> <View style={styles.stuText}><Text style={styles.stuname}>{rowData.studentname}</Text> </View> </View> <TouchableOpacity onPress={this.delete.bind(this,rowData.id,rowID,rowData.studentid)}> <Image source={image} style={styles.followIcon}/> </TouchableOpacity> </View> </TouchableHighlight>
但是又不能去掉TouchableOpacity这个组件就尝试再排除,把里面的Image替换为Text,果然没有此类问题。这下就知道坑在Image组件上了,尝试改变样式。最终发现是样式followIcon中的resizeMode:'stretch'引起的,至于原因并不是很清楚,特此做个记录。