小道具を受け取ったときにネイティブメジャーコンポーネントに反応する

Question

私は自分のビューのルートとしてScrollViewを持っています。その中にはたくさんのTextコンポーネントがあります。各コンポーネントには独自の 'ref'があり、アクセス可能です。 今、数字の小道具を渡しています。その数字は、どのテキストをスクロールするかを教えてくれます。だから私は最初にそれを測定する必要があります。私はこれらの4つのアプローチを試しましたが、それぞれが私に未定義の値だけを与えています。 アイデアは誰ですか？

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位置を取得することもできます）。 https://facebook.github.io/react-native/docs/view.html#onlayout
• コールバック関数（onLayoutを呼び出す関数）で、この高さをアイテムのインデックスに格納します。たとえば、次のようなものがあります：this.widthsTab [0] = 312
• 次に、あなたの要素がどこにあるかを正確に取得し、その正確な位置にスクロールするためにwidthsタブを通過するだけです。
• また、画面の高さの半分を削除して、要素が画面の中央にあることを確認することもできます。

完全にはっきりしていないのですが、申し訳ありませんが、私はあなたがそのアイディアを得られると確信しています。私はすぐに例を追加します。

編集：

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で調整してお気軽に応じて、1つによりオフすることがあります。 また、現在のアイテムの幅の半分を削除します。これは、その真ん中を右にスクロールしたかったからですが、最初またはこのアイテムまたは他のものにスクロールしたい場合は、自由に変更してください。