React Native - 在收到道具時測量組件

Question

我有一個ScrollView作為我視圖的根。 在里面我展示了一堆Text組件。 每個組件都有自己的'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

請看下面的示例

假設你的scrollView的每個項目都有不同的大小（否則它更容易）：

• 創建一個將接收每個項目高度的數組。 例如，在組件的構造函數中。 默認情況下它是空的。
• 使用onLayout屬性可以獲得scrollView的每個項目的高度（您還可以獲得屏幕上的寬度和精確的x，y位置）。 在mount和布局更改時調用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>
    );
  }
}

數組的索引可能會偏離1，具體取決於您是從0還是1開始計算。可以隨意調整+/- 1。 此外，我刪除了當前項目寬度的一半，因為我想在其中間向右滾動，但如果您想要滾動到開頭或此項目或其他內容，請隨時更改。