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

Question

当我们刚刚通过 StackNavigator 导航到当前屏幕时，是否可以告诉 ScrollView 滚动到特定位置？

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

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

我读到您可以在使用 StackNavigator 时传入参数，如下所示:但我不知道如何在“项目”屏幕中读出该参数。

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

那么这在 React Native 中是可能的吗，我该怎么做？或者我使用了错误的导航器？

这是我的两个屏幕的简化版本:

应用程序.js:

const SimpleApp = StackNavigator({
    Menu: { screen: MenuScreen},
    Items: { screen: ItemScreen }
  }
);

export default class App extends React.Component {
  render() {
    return <SimpleApp />;
  }
}

菜单.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'/>
    }
}

项目.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，但理想情况下可能会有一个跨平台的解决方案。

Answer 1

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 实现的在您的子组件中。

我觉得最好的时候打电话 scrollTo您的 ScrollView 引用是首次分配的时间。你已经给它一个引用并运行一个回调函数——我只是调整它，让它也调用 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 参数，这意味着您必须计算滚动到的确切位置 - 将每个滚动项的宽度乘以您要滚动到的项的索引。如果每个项目都涉及填充，它会变得更加痛苦。