Question

我有一个问题是获取我的PicComponent的绝对位置。

我尝试了很多东西，但没有什么能够安全起作用。

我的package.json：

{
  "name": "picapptwo",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "@storybook/react-native": "^3.4.0",
    "jest-expo": "26.0.0",
    "react-dom": "^16.3.1",
    "react-native-debugger-open": "^0.3.17",
    "react-native-scripts": "1.13.1",
    "react-test-renderer": "16.3.0-alpha.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest",
    "postinstall": "rndebugger-open --expo",
    "storybook": "storybook start -p 7007"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@redux-offline/redux-offline": "^2.3.2",
    "buffer": "^5.1.0",
    "expo": "^26.0.0",
    "prop-types": "^15.6.1",
    "react": "16.3.0-alpha.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz",
    "react-native-animatable": "^1.2.4",
    "react-native-autocomplete-input": "^3.5.0",
    "react-native-remote-svg": "^1.2.0",
    "react-navigation": "^1.5.9",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-logger": "^3.0.6",
    "redux-observable": "^0.18.0",
    "redux-promise-middleware": "^5.0.0",
    "redux-saga": "^0.16.0",
    "redux-thunk": "^2.2.0"
  }
}

我的Pic组件：

 <View
         ref={el => this.container = el}
         // style={styles.container}
         onLayout={this.onLayout}
         // onLayout={(event) => {
         //this.find_dimesions(event.nativeEvent.layout)}}
    >
       <TouchableOpacity
           onPress={this.onPress}
       >
           <Image
              source={{uri: `data:image/svg+xml;utf8,${pic}`}}
                  style={styles.pic}
           />
       </TouchableOpacity>
  </View>

我试过了：

onLayout = () => {
        this.container && this.container.measureInWindow(this.onMeasure);
    };

    onMeasure = (x, y, width, height) => {
        console.log('screens');
        console.log('screenx: ' + x + ' screenY: ' + y);
        this.props.onRenderPic(this.props.pic_index, x, y, width, height);
    };

但是当我触摸时，y值与来自PanResponder的gestureState不同。它比触摸时小了近20个像素。

如果来自measureInWindow的y为123，则窗口中同一点的gesturestate值为148。

这是PanResponder功能：

onMoveShouldSetPanResponder = (gestureState) => {
    const { dx, dy, moveX, moveY, numberActiveTouches } = gestureState;
}

当我触摸视图顶部的屏幕时，

moveY应该与measureInWindow中的y值相同。

所以我尝试了measure（而不是measureInWindow）函数，并对帧位置采用了回调的第一个和第二个参数。但是我对x和y总是0。这是android中的错误吗？

所以我试过了：

<View
   ref={el => this.container = el}
   onLayout={(event) => { this.find_dimesions(event.nativeEvent.layout) }}
>

和功能：

find_dimesions(layout){
        const {x, y, width, height} = layout;
        this.props.onRenderPic(this.props.pic_index, x, y, width, height);
}

但是这不起作用，因为y总是0，因为它相对于它的父元素。同样的问题： React Native onLayout nativeEvent.layout.y always returns 0

所以我用measureLayout函数找到了这个解决方案：

https://github.com/facebook/react-native/issues/4753

假设您的render（）方法具有以下内容：

<ScrollView ref='scrollView'>
  ... whatever ...
  <Card ref='card'/>
</ScrollView>

滚动到正确的位置：

this.refs.card.measureLayout(
  React.findNodeHandle(this.refs.scrollView),
  (x, y, width, height, pageX, pageY) => {
    this.refs.scrollView.scrollTo(y);
  }
)

这不会滚动到正确的位置：

this.refs.card.measure(
  (x, y, width, height, pageX, pageY) => {
    this.refs.scrollView.scrollTo(y);
  }
)

但我不是t think it对我来说是一个很好的解决方案，因为我没有引用我应用的根组件。

或者您认为我现在可以做些什么来获得我的观点的绝对位置？我希望在第一次渲染时获得位置，并且每次渲染时都是如此。可能在删除视图并且动画停止时。

我对这些职位有另一个问题。组件在父组件的Scrollview中呈现：

<ScrollView contentContainerStyle={styles.contentContainer}>
        <View style={styles.container}>
        {pics.map((pic, i) =>
          <StoryPic
            key={i}
            pic={pic}
            onRenderPic={onRenderPic}
            pic_index={i}
            story_index={story_index}
            removePic={removePic}
            // onPress={onPress}
          />
        )}
        </View>
      </ScrollView>

它们使用flexDirection定位：'row'。

如果我有5个PicComponents，它们都在同一行和相同的高度。

这意味着所有人的y值必须相同。但有时我会得到第一个160，最后四个140。

你知道这里出了什么问题吗？

如果你能在这里帮助我，我会很高兴。

在android

0 个答案: