React Native - 从另一个屏幕导航后如何将 ScrollView 滚动到给定位置 [英] React Native - how to scroll a ScrollView to a given location after navigation from another screen
问题描述
当我们刚刚通过 StackNavigator 导航到当前屏幕时,是否可以告诉 ScrollView 滚动到特定位置?
Is it possible to tell a ScrollView to scroll to a specific position when we just navigated to the current screen via StackNavigator?
我有两个屏幕;菜单和项目.菜单是一个按钮列表,每个项目一个.Items 屏幕包含一个使用 ScrollView 构建的 Carousel,其中包含每个 Item 的图片和详细说明.
I have two screens; Menu and Items. The Menu is a list of Buttons, one for each item. The Items screen contain a Carousel built using ScrollView with the picture and detailed description of each Item.
当我点击菜单屏幕中的按钮时,我想导航到项目屏幕,并自动滚动到按钮代表的项目.
When I click on a button in the Menu screen, I want to navigate to the Items screen, and automatically scroll to the Item that the button represent.
我读到您可以像这样在使用 StackNavigator 时传入参数:但我不知道如何在项目"屏幕中读出该参数.
I read that you can pass in parameters when using the StackNavigator like so: but I don't know how to read out that parameter in my Items screen.
navigate('Items', { id: '1' })
那么这在 React Native 中是可能的吗,我该怎么做?或者我使用了错误的导航器?
So is this something that is possible in React Native and how do I do it? Or perhaps I'm using the wrong navigator?
这是我的两个屏幕的简化版:
Here's a dumbed down version of my two screens:
App.js:
const SimpleApp = StackNavigator({
Menu: { screen: MenuScreen},
Items: { screen: ItemScreen }
}
);
export default class App extends React.Component {
render() {
return <SimpleApp />;
}
}
Menu.js
export default class Menu extends React.Component {
constructor(props){
super(props)
this.seeDetail = this.seeDetail.bind(this)
}
seeDetail(){
const { navigate } = this.props.navigation;
navigate('Items')
}
render(){
<Button onPress={this.seeDetail} title='1'/>
<Button onPress={this.seeDetail} title='2'/>
}
}
Items.js
export default class Items extends React.Component {
render(){
let scrollItems = [] //Somecode that generates and array of items
return (
<View>
<View style={styles.scrollViewContainer}>
<ScrollView
horizontal
pagingEnabled
ref={(ref) => this.myScroll = ref}>
{scrollItems}
</ScrollView>
</View>
</View>
)
}
}
P.S 我目前专门针对 Android,但理想情况下可能会有一个跨平台的解决方案.
P.S I am specifically targeting Android at the moment, but ideally there could be a cross-platform solution.
推荐答案
我读到您可以像这样在使用 StackNavigator 时传入参数:但我不知道如何在项目"屏幕中读出该参数.
I read that you can pass in parameters when using the StackNavigator like so: but I don't know how to read out that parameter in my Items screen.
这是通过访问子组件中的 this.props.navigation.state.params
来实现的.
That is achieved by accessing this.props.navigation.state.params
inside your child component.
我认为在滚动视图引用上调用 scrollTo
的最佳时间是它第一次被分配时.您已经为它提供了一个引用并运行了一个回调函数 - 我只是调整它以便它同时调用 scrollTo
:
I think the best time to call scrollTo
on your scrollview reference is when it first gets assigned. You're already giving it a reference and running a callback function - I would just tweak it so that it also calls scrollTo
at the same time:
export default class Items extends React.Component {
render(){
let scrollItems = [] //Somecode that generates and array of items
const {id} = this.props.navigation.state.params;
return (
<View>
<View style={styles.scrollViewContainer}>
<ScrollView
horizontal
pagingEnabled
ref={(ref) => {
this.myScroll = ref
this.myScroll.scrollTo() // !!
}>
{scrollItems}
</ScrollView>
</View>
</View>
)
}
}
这就是为什么我使用 FlatLists 或 SectionLists(继承自 VirtualizedList) 而不是 ScrollViews.VirtualizedList
有一个 scrollToIndex 函数更直观.ScrollView 的 scrollTo 需要 x 和 y 参数,这意味着您必须计算滚动到的确切位置 - 将每个滚动项的宽度乘以您要滚动到的项的索引.如果每个项目都涉及填充,那就更麻烦了.
And this is why I use FlatLists or SectionLists (which inherit from VirtualizedList) instead of ScrollViews. VirtualizedList
has a scrollToIndex function which is much more intuitive. ScrollView's scrollTo expects x and y parameters meaning that you would have to calculate the exact spot to scroll to - multiplying width of each scroll item by the index of the item you're scrolling to. And if there is padding involved for each item it becomes more of a pain.
这篇关于React Native - 从另一个屏幕导航后如何将 ScrollView 滚动到给定位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!