如何用event.nativeEvent.layout計算位置在視圖中時的位置

Question

我正在嘗試做一個拖放組件，並且爲此需要使用dropZone的x和y位置。一切都很好，但是當我嘗試獲取區域和我的dropzone的位置時在視圖內react-native給我一個基於視圖的值，我可以以某種方式知道根位置。

絲毫onLayout我把事件

<View style={styles.borderView}> 
    <Text style={styles.text}> 
    after he had dug down only a few inches he uncovered a 
    <View 
     onLayout={this.setDropZoneValues.bind(this)} 
     style={styles.viewDropZone} 
    > 
     <Text>_________</Text> 
    </View> 
    of silver coins and jewelry. He couldn’t believe it 
    </Text> 
</View> 

下面我帶的面積，Y和X

setDropZoneValues(event) { 
     this.props.setDropZoneValue(event.nativeEvent.layout); 
} 

風格

viewDropZone: { 
    backgroundColor:'red', 
    height: 10, 
    width: 60 
}, 
text: { 
    backgroundColor: theme.colors.transparent, 
    textAlign: 'left', 
}, 
borderView: { 
    backgroundColor: theme.colors.colomboGrayBackground, 
    marginTop: 5, 
    margin: 8, 
    padding: 10, 
    borderStyle: 'dashed', 
    borderWidth: 1.5, 
    borderRadius: 2, 
    borderColor: theme.colors.colomboSubTitle, 
}, 

感謝

Answer 1

這是我如何處理這個問題

我用onLayaut在這兩個父視圖和子視圖，在我保存的狀態值父，當我計算子視圖中的位置我在我的視圖中將parentPosition添加到了我的postionValue中。

一些代碼：

父我計算

renderSection(seccion, key) { 
    return (
     <View onLayout={(event) => this.props.setSeccionOffset(event.nativeEvent.layout.y, seccion.id)} style={styles.mainContainer} key={key}> 
      <Text numberOfLines={1} style={styles.title} >{seccion.title}</Text> 
      {seccion.questions.map((dropZones, idx) => { 
       return this.renderDropZones(dropZones, idx, seccion.id) 
      })} 
     </View> 
    ) 
} 

兒子

renderDropZones(seccion, idx, parentId) { 
    return (
     <View onLayout={(event) => this.setDropZoneValues(event, seccion, parentId)} style={styles.leftField} key={idx}> 
      <Text style={styles.LabelTittle} numberOfLines={1}> {seccion.text} <Text style={[styles.LabelTittle, { color: this.setColor() }]}>{seccion.selectedBy}</Text></Text> 
     </View> 
    ); 
} 

這裏

setDropZoneValues(event, seccion, parentId) { 
    let dropZone = event.nativeEvent.layout; 
    setTimeout(
     () => { 
      dropZone.id = seccion.index; 
      dropZone.y += this.props.multiDragStore.seccions[parentId].offsetContainer; 
      this.props.setDropZoneValue(dropZone); 
     }, 
     10, 
     dropZone 
    ); 
} 

的setTimeout的我的觀點基於他的父母，總部設在屏幕的父母現在的位置的位置是因爲onlayout是一個回調，我需要驗證偏移之前，我計算定義他的父母兒子位置