Javascript React Native ScrollView-如何从另一个子组件按钮滚动到子组件？

我有一个ScrollView结构，它是一个有5个孩子的家长

具有ScrollView的父组件

• 组件1
• 组件2
• 组成部分3
• 组件4
• 组件5

在Component3内部，我有一个按钮，按下该按钮时，应将父组件ScrollView滚动到Component5

    export default class Component5 extends Component {

    saveLayout() {
        this.view.measureInWindow((x, y, width, height) => {
            this.props.callParentFunction(x, y)
        })
    }
    render() {
        return (
            <View ref={ref => this.view = ref} onLayout={() => this.saveLayout()}>

            </View>
        )
    }
}

像这样的

家庭（家长）

导出默认类Home.Component{
renderComments（）{
返回此.state.dataSource.map（项=>
);
}
render（）{
返回(
{this.renderComments（）}
);
}
}

我所做的是..
在component5中，我在主视图中调用onLayout，然后在父组件中保存

x

和

y

。 要在组件3中滚动到它，单击我调用父函数，该函数使用scrollview ref滚动到之前存储的值

组件5

    export default class Component5 extends Component {

    saveLayout() {
        this.view.measureInWindow((x, y, width, height) => {
            this.props.callParentFunction(x, y)
        })
    }
    render() {
        return (
            <View ref={ref => this.view = ref} onLayout={() => this.saveLayout()}>

            </View>
        )
    }
}

导出默认类组件5扩展组件{
saveLayout（）{
此.view.measureInWindow（（x，y，宽度，高度）=>{
this.props.callParentFunction（x，y）
})
}
render（）{
返回(
this.view=ref}onLayout={（）=>this.saveLayout（）}>
)
}
}

组成部分3

export default class Component3 extends Component {

    render() {
        return (
            <View >
                <TouchableOpacity onPress={()=>{this.props.goToComponent5()}}>

                </TouchableOpacity>
            </View>
        )
    }
}

导出默认类组件3扩展组件{
render（）{
返回(
{this.props.goToComponent5（）}}>
)
}
}

家长：

export default class Parent extends Component {
constructor(props) {
this.goToComponent5=this.goToComponent5.bind(this)
    super(props)
    this.state = {
        x:0,
        y:0,
    }
}

    callParentFunction(x, y) {
        this.setState({ x, y })
    }

    goToComponent5(){
        this.ScrollView.scrollTo({x: this.state.x, y: this.state.y, animated: true});
    }

    render() {
        return (
            <View >
                <ScrollView ref={ref => this.ScrollView = ref}>
                    <Component1 />
                    <Component2 />
                    <Component3 goToComponent5={this.goToComponent5}/>
                    <Component4 />
                    <Component5 callParentFunction={this.callParentFunction}/>
                </ScrollView>
            </View>
        )
    }
}

导出默认类父扩展组件{
建造师（道具）{
this.goToComponent5=this.goToComponent5.bind（this）
超级（道具）
此.state={
x:0,，
y:0，
}
}
callParentFunction（x，y）{
this.setState（{x，y}）
}
goToComponent5（）{
this.ScrollView.scrollTo（{x:this.state.x，y:this.state.y，动画：true}）；
}
render（）{
返回(
this.ScrollView=ref}>
)
}
}

这看起来是一个很好的方法。我想我缺少的一个问题是宽度和高度。我有“this.setState不是函数（在'this.setState（{x，y}）'中，'this.setState'是未定义的）我忘记创建状态，请参见编辑。宽度和高度有什么问题？是的，即使在状态下问题仍然存在。我尝试了callParentFunction=（x，y）=>{this.setState（{x，y}）；}当我按下I get“undefined”键时，它现在起作用了。它不是一个对象（计算'this.ScrollView.scrollTo'）“差不多了，我想=）请看编辑，应该可以，原因可能是

此

不在

goToComponent5

的范围内。您可以在此处查看答案，您可以进行一些更改并实现所需的解决方案。