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

Posted 2023-02-23

【中文标题】React Native ScrollView - 如何从另一个子组件按钮滚动到子组件？

【英文标题】：React Native ScrollView - How to scroll to a child component from another child component button?

【发布时间】：2019-07-22 13:19:44

【问题描述】：

我有一个带有 ScrollView 的结构，它是一个有 5 个孩子的父级

带有 ScrollView 的父组件

组件1 组件2 组件3 组件4 组件5

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

类似的东西

首页（父）

export default class Home extends React.Component       
    renderComments() 
        return this.state.dataSource.map(item =>
            <CommentDetail key=item.id comment=item />
        );
    

    render() 
        return (
            <ScrollView>      
                <Component1 />
                <Component2 />
                <CentralElements  ...this.state.dataSource scroll = this.props.scroll />
                <Component4 />                  
                <View>
                    this.renderComments()
                </View>
            </ScrollView>
        );
    

CentralElements (Component3)

export default class CentralElements extends React.Component 
    constructor(props) 
        super(props);
    
  
    goToComments= () => 
        this.props.scroll.scrollTo(x: ?, y: ?, animated: true);
     ;

    render() 
        return (
            <ScrollView horizontal=true>
                <TouchableOpacity onPress=this.goToComments>
                    <Image source=require('../../assets/image.png') />
                    <Text>Comments</Text>
                </TouchableOpacity>
                ...
                </TouchableOpacity>
            </ScrollView>
        );
    
;

评论是Component5，关于如何父滚动的任何想法？ 我试图弄清楚我错过了什么，因为那是我第一次接触这个。

【问题讨论】：

你能不能在这里看看答案***.com/a/56065152/8031495你可以做一些改变，可以达到想要的解决方案。

【参考方案1】：

我所做的是.. 在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>
        )
    

组件3

export default class Component3 extends Component 

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

                </TouchableOpacity>
            </View>
        )
    

家长：

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.setState 不是函数。（在 'this.setState( x, y )' 中，'this.setState' 未定义）

我忘了创建状态，见编辑。宽高有什么问题？

是的，即使在状态下问题仍然存在。我试过 callParentFunction = (x, y) => this.setState( x, y ); 哪个有效

现在当我按下时我得到“未定义不是一个对象（评估'this.ScrollView.scrollTo'）”我猜几乎就在那里=）

查看编辑，应该可以，原因可能是this不在goToComponent5的范围内