Question

我正在关注this tutorial，以创建具有拖放区的多个拖放对象。

放置区域只是一定高度，可以水平填充屏幕

export default class Screen extends Component {
  render() {
    return (
      <View style={styles.mainContainer}>
        <View style={styles.dropZone}>
          <Text style={styles.text}>Drop them here!</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  mainContainer: {
    flex: 1
  },
  row: {
    flexDirection: "row"
  },  
  dropZone: {
    height: 200,
    backgroundColor: "#00334d"
  }
}

然后检查我们是否在放置区域内释放了可拖动对象的代码非常简单，只需检查y坐标是否高于某个值即可。

isDropArea(gesture) {
  return gesture.moveY < 200;
}

这很简单，它在样式定义和检查我们是否在放置区域的函数中对200值进行硬编码。

我想做的是创建一个2x2的拖放区数组。为此，我将它们放在一定高度的View中，并使用flex逐行和逐列扩展每个放置区域。我将每个dropZone定义为30x30，并用'space-around'将justifyContent定位。

<View style={styles.mainContainer}>
  <View style={styles.col}>
    <View style={styles.row}>
      <View style={styles.dropZone} />
      <View style={styles.dropZone} />
    </View>
    <View style={styles.row}>
      <View style={styles.dropZone} />
      <View style={styles.dropZone} />
    </View>
  </View>
</View>


const styles = StyleSheet.create({
  mainContainer: {
    flex: 1
  },
  row: {
    flexDirection: "row",
    justifyContent: 'space-around'
  },  
  col: {
    height: 500,
    flexDirection: "column",
    justifyContent: 'space-around'
  },  
  dropZone: {
    height: 30,
    width: 30,
    flexDirection: "row",
    backgroundColor: "#00334d"
  }
})

好，现在是问题。通过使用flex，我没有指定每个放置区域的坐标，而是让渲染器完成了。我可以做一些数学运算，并通过获取屏幕分辨率并知道我有多少个拖放区及其大小来计算这些坐标。

但是，有没有办法检索此DropZones的位置，以便我可以创建一个函数getDropZoneIndex来返回我将可拖动对象拖放到的拖放区？

Answer 1

是的，您可以在React Native中获取任何视图的坐标。有一个onLayout（）道具可以让您做到这一点：

render() {
  return (<View onLayout={this.onLayout}/>);
}

onLayout = (event) => {
  const {x, y, width, height} = event.nativeEvent.layout;
}

如果我没记错的话，此布局对象的x和y坐标是相对于父组件的。

使用flex时获取<view>的坐标

1 个答案: