React Native ScrollView-如何从另一个子组件按钮滚动到一个子组件? [英] React Native ScrollView - How to scroll to a child component from another child component button?
问题描述
我有一个带有ScrollView的结构,它是一个有5个孩子的父级
I have this structure with a ScrollView, which is a parent with 5 childs
带有ScrollView的父组件
Parent Component with ScrollView
- Component1
- Component2
- Component3
- Component4
- Component5
- Component1
- Component2
- Component3
- Component4
- Component5
内部Component3我有一个按钮,当按下该按钮时,应将父组件ScrollView滚动到Component5
Inside Component3 I have a button that when pressed should scroll parent component ScrollView to 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>
);
}
};
注释是组件5,关于父级如何滚动?
我想弄清楚自己所缺少的东西,因为那是我的第一次接触。
And the Comments are the Component5, any idea on how to the parent scroll? I trying to figure what I'm missing, since thats my first contact with this.
推荐答案
我做了什么was ..
在component5中,我在主视图中调用onLayout,然后保存 x
和 y
在父组件中。
要在单击时在组件3中滚动到它,我调用父函数,该函数使用scrollview ref滚动到之前存储的值
What i did was..
in component5 I call onLayout in the main view and then save x
and y
in the parent component.
To scroll to it in component 3 on click i call the parent function that uses the scrollview ref to scroll to the values stored before
Component5
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>
)
}
}
Component3
Component3
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>
)
}
}
这篇关于React Native ScrollView-如何从另一个子组件按钮滚动到一个子组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!