ビュー内にあるときにevent.nativeEvent.layoutで位置を計算する方法

Question

ドラッグアンドドロップコンポーネントを実行しようとしていますが、そのためにはdropZoneのxとyの位置が必要です。すべては問題ありませんが、私が領域と私のdropzoneの位置を取得しようとすると、私はビューに基づいて、私に何かの方法で根の位置を知ることができます。

聖霊降臨祭私はイベントに

ここ

<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> 

を取るonLayout私は、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を使用し扱いとするとき、私は計算方法です息子の位置View私は自分のView内の私のpostionValueにparentPositionを追加しました。

いくつかのコード：ここ

親

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> 
    ); 
} 

私は計算onlayoutがコールバックであると私は計算する前に、彼の親のオフセットを定義したことを検証する必要があるので、彼の親に基づいて、私の見解の位置と画面に基づいて、親postion

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です息子の位置