一個TouchableOpacity引發的災難

今天碰見一個從來沒見過的bug，很古怪也很有意思，特意記錄下來。

結果如下

代碼如下

 <View style={{width:280,flexWrap:'wrap',flexDirection:'row',marginRight:50,}}>

          {
            rowData.picurl1!=''&&rowData.picurl1.indexOf('/')==0?
            <TouchableOpacity onPress={this.openModal.bind(this, true,1,rowData)} >
            <Image source={{uri:API_HOME+rowData.picurl1}} style={styles.imgreviews}/>
            </TouchableOpacity>
            :<View ></View>
          }

　　　　　　{
            rowData.picurl2!=''&&rowData.picurl2.indexOf('/')==0?
            <TouchableOpacity onPress={this.openModal.bind(this, true,2,rowData)} >
            <Image source={{uri:API_HOME+rowData.picurl2}} style={styles.imgreviews}/>
            </TouchableOpacity> :<View ></View> }

　　　　　　{
            rowData.picurl3!=''&&rowData.picurl3.indexOf('/')==0?
            <TouchableOpacity onPress={this.openModal.bind(this, true,3,rowData)} >
            <Image source={{uri:API_HOME+rowData.picurl3}} style={styles.imgreviews}/>
            </TouchableOpacity> :<View ></View> }

　　　　　　...
</View>

找了半天都沒找到原因為什么圖片一多就會重疊

樣式上根本沒有任何問題，通過各種排除法當我去掉TouchableOpacity

的時候，圖片就不會重疊了，后來嘗試在去掉TouchableOpacity的情況下加上<View>

類似於這樣：

　　　　　　{
            rowData.picurl3!=''&&rowData.picurl3.indexOf('/')==0?
            <View style={{flex:1}} >
            <Image source={{uri:API_HOME+rowData.picurl3}} style={styles.imgreviews}/>
            </View>
            :<View ></View>
          }

圖片依然重疊，后面偶然間把View的style改成了

style={styles.imgreviews}

圖片就不重疊了，得益於此發現最后把TouchableOpacity的style也改成這樣，就都大功告成了

　　　　　　{
            rowData.picurl1!=''&&rowData.picurl1.indexOf('/')==0?
            <TouchableOpacity  style={styles.imgreviews}  onPress={this.openModal.bind(this, true,1,rowData)} >
            <Image source={{uri:API_HOME+rowData.picurl1}} style={styles.imgreviews}/>
            </TouchableOpacity>
            :<View ></View>
          }

可以看出，這個結果不是因為TouchableOpicaty的問題，以后再遇到Image的組件的時候一定要格外小心它外層如果

必須要包含<View>的話，最好是給這個View確定一個樣式，這樣才不容易出現問題