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目前，但理想情況下，可能會有跨平臺的解決方案。

來源

2017-10-11 Synia

是的，這可以通過使用scrollTo方法 - 請參閱docs。您可以在componentDidMount中調用此方法。你只需要一個名字叫做：this.myScroll.scrollTo(...)。請注意，如果您有一組相同類型的項目，則應該使用FlatList。

來源

2017-10-12 00:13:50 vonovak

但我需要知道選擇哪個項目才知道要滾動到哪裏。如何讓我的項目屏幕知道在上一個菜單屏幕中選擇了哪個項目？ – 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參數，這意味着您將必須計算滾動到的確切點 - 每個滾動項的寬度乘以您滾動的項目的索引。如果每個項目都有填充，它就會變得更加痛苦。

來源

2017-10-12 00:56:48

React Native - 如何在從另一個屏幕導航後將ScrollView滾動到給定位置

回答

相關問題