In React Native, wie bekomme ich den Y-Offset einer benutzerdefinierten Komponente und dann ScrollView zu seiner Position?

Question

in nativer Reaktion, habe ich einen Bildschirm mit einer ScrollView:

let scrollView; 
let myComponent2; 

function onPress() { 
    myComponent2.measure((frameOffsetX, frameOffsetY, width, height, pageOffsetX, pageOffsetY) => { 
    scrollView.scrollTo({ y: frameOffsetY }); 
} 

function MyScrollView() { 
    return (
    <ScrollView ref={ref => scrollView = ref}> 
     <MyButton onPress={onPress} /> 
     <MyComponent1 /> 
     <MyComponent2 ref={ref => myComponent2 = ref} /> 
     <MyComponent3 /> 
    </ScrollView> 
); 
}; 

Und MyButton ist wie folgt definiert:

function MyButton(props) { 
    return (
    <TouchableHighlight onPress={props.onPress}> 
     <Text>Press Me</Text> 
    </TouchableHighlight> 
); 
} 

Was ich versuche zu erreichen ist, dass, wenn der Benutzer drückt auf die MyButton Komponente, die ScrollView sollte scrollen, so dass MyComponent2 sichtbar ist. Das Problem ist, dass ich measure nicht auf einer benutzerdefinierten Komponente verwenden kann, nur direkt in einem View.

Also meine Frage ist: Was wäre der beste Ansatz, um den Y-Offset einer benutzerdefinierten React Native-Komponente zu bekommen?

Answer 1

landete ich meine Komponente um eine zusätzliche View Einwickeln der Lage sein, seine erhalten Offset:

let scrollView; 
let myComponent2Wrapper; 

function onPress() { 
    myComponent2Wrapper.measure((frameOffsetX, frameOffsetY, width, height, pageOffsetX, pageOffsetY) => { 
    scrollView.scrollTo({ y: frameOffsetY }); 
} 

function MyScrollView() { 
    return (
    <ScrollView ref={ref => scrollView = ref}> 
     <MyButton onPress={onPress} /> 
     <MyComponent1 /> 
     <View ref={ref => myComponent2Wrapper = ref}> 
     <MyComponent2 /> 
     </View> 
     <MyComponent3 /> 
    </ScrollView> 
); 
};