React Native - 如何在从另一个屏幕导航后将ScrollView滚动到给定位置

问题描述：

当我们通过StackNavigator导航到当前屏幕时，是否可以告诉ScrollView滚动到特定位置？React Native - 如何在从另一个屏幕导航后将ScrollView滚动到给定位置

我有两个屏幕;菜单和项目。菜单是一个按钮列表，每个项目一个。项目屏幕包含使用ScrollView构建的Carousel，其中包含每个项目的图片和详细说明。

当我点击菜单屏幕上的按钮时，我想导航到项目屏幕，并自动滚动到该按钮所代表的项目。

我读过，你可以像这样使用StackNavigator时传入参数：但我不知道如何在我的项目屏幕中读出该参数。

navigate('Items', { id: '1' })

所以这是在React Native中可能的事情，我该怎么做呢？或者，也许我使用了错误的导航器？

这里是我的两个屏幕的简单化版本：

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> 
    ) 
    } 
}

PS我专门针对Android目前，但理想情况下，可能会有跨平台的解决方案。

答

是的，这可以通过使用scrollTo方法 - 请参阅docs。您可以在componentDidMount中调用此方法。你只需要一个名字叫做：this.myScroll.scrollTo(...)。请注意，如果您有一组相同类型的项目，则应该使用FlatList。

但我需要知道选择哪个项目才知道要滚动到哪里。如何让我的项目屏幕知道在上一个菜单屏幕中选择了哪个项目？ – Synia

理想情况下，您应该知道所选项目的索引并将其作为道具发送到“项目屏幕”。那么你可以使用'scrollToIndex'方法，只要你的物品都是一样的高度。 – vonovak

你好，是的，我知道所选项目的索引。我不确定如何通过StackNavigator或任何其他导航器将索引作为道具从一个屏幕传递到另一个屏幕 – Synia

答

我读过你可以像使用StackNavigator那样传递参数：但是我不知道如何在我的Items屏幕中读出这个参数。

这是通过访问子组件内的this.props.navigation.state.params实现的。

我认为在您的滚动视图引用上调用scrollTo的最佳时间是第一次分配时的最佳时间。你已经发出文件并运行一个回调函数 - 我只是想调整它，这样它也同时呼吁scrollTo：

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参数，这意味着您将必须计算滚动到的确切点 - 每个滚动项的宽度乘以您滚动的项目的索引。如果每个项目都有填充，它就会变得更加痛苦。

React Native - 如何在从另一个屏幕导航后将ScrollView滚动到给定位置

相关推荐