React Native - 道具收到时测量组件

Question

我有一个ScrollView作为我的视图的根。在里面，我展示了一堆文本组件。每个组件都有自己的'ref'，因此它们是可访问的。 现在，我通过一个数字的道具，这个数字告诉我我应该滚动到哪个文本。所以我需要先测量它。我尝试了这四种方法，但他们每个人只给我未定义的值。 任何想法的人？

componentWillReceiveProps(nextProps) { 
 
    //this is a reference to my 'Text' component 
 
    const chapterNo = nextProps.navigation.state.params.chapter; 
 
    const chapterRef = this.refs["chapter" + chapterNo]; 
 

 
    //method 1: 
 
    var RCTUIManager = require('NativeModules').UIManager; 
 
    var handle = ReactNative.findNodeHandle(chapterRef); 
 
    RCTUIManager.measure(handle, (x, y, width, height, pageX, pageY) => { 
 
     console.log(x, y, width, height); 
 
    }); 
 

 
    //method 2: 
 
    NativeMethodsMixin.measure.call(chapterRef, (x, y, width, height) => { 
 
     console.log(x, y, width, height); 
 
    }); 
 

 
    //method 3: 
 
    chapterRef.measure((ox, oy, width, height, px, py) => { 
 
     console.log(ox, oy, width, height); 
 
    }); 
 

 
    //method 4 (same as 3 but with setTimout): 
 
    setTimeout(() => { 
 
     chapterRef.measure((ox, oy, width, height, px, py) => { 
 
      console.log(ox, oy, width, height); 
 
     }); 
 
    }, 0); 
 
}

Answer 1

参见下文

一个例子假设你的滚动视图的每个项目都有不同的大小（否则它会更简单）：

• 创建阵列，将收到每个项目的高度。例如在组件的构造函数中。默认情况下它是空的。
• 使用onLayout属性获取scrollView的每个项目的高度（您也可以在屏幕上获取宽度和确切的x，y位置）。在挂载和布局更改时调用onLayout：https://facebook.github.io/react-native/docs/view.html#onlayout
• 在您的回调函数（您调用onLayout的函数）中将此高度与项目的索引一起存储。你会得到如下例子：this.widthsTab [0] = 312
• 然后，你只需要通过你的widthsTab来获取你的元素的确切位置，并滚动到确切的位置。
• 您还可以移除屏幕高度的一半，以确保元素位于屏幕中间。

对不起，如果它不完全清楚，但我相信你会明白。我会尽快添加一个示例。

编辑：

class HorizontalNavCustomerFlow extends Component { 

    state = { 
    heights: [], 
    totalHeight: 0, 
    heightsChecked: 0, 
    }; 

    componentDidUpdate() { 
    const { currentParagraph } = this.props; // Id of the paragraph you want to scroll to 
    // Compute current item position and scroll when all item heights are computed 
    if (this.state.widthsChecked === HOW_MANY_ITEMS_YOU_HAVE) { // use for example .lenght if you have an array 
     let yposition = 0; 
     const screenHeight = Dimensions.get('window').height; 
     for (let i = 0; i <= currentParagraph; i++) { 
     yposition += this.state.heights[i]; 
     } 
     // Removing half of current element 
     yposition -= this.state.heights[currentParagraph]/2; 
     // And half of screen's height 
     yposition -= screenHeight/2; 
     // Last elements 
     if (yposition > (this.state.totalWidth - screenWidth)) { 
     yposition = this.state.totalHeight - screenHeight; 
     } 
     // Scroll 
     if (yposition > 0) this.refs.MainScrollView.scrollTo({ y: yposition, animated: false }); 
    } 
    } 

    // Render 
    render() { 
    return (
     <View> 
     <ScrollView 
      ref='MainScrollView' 
      showsVerticalScrollIndicator={false} 
     > 

      // ... Your items 
      <View 
      onLayout={(object) => { 
       const { height } = object.nativeEvent.layout; 
       const newState = this.state; 
       newState.heights[index] = width; 
       newState.heightsChecked = this.state.heightsChecked + 1; 
       newState.totalHeight = this.state.totalHeight + height; 
       this.setState(newState); 
      }} 
      > 
      <Text>...</Text> 
      </View> 

     </ScrollView> 
     </View> 
    ); 
    } 
} 

数组的索引可能我关闭的一个，这取决于你从0开始计数或1.您可以随意+/- 1进行调整。 此外，我删除了当前项目的一半宽度，因为我想在它的中间向右滚动，但是如果您想滚动到开头或此项目或其他内容，请随时更改。