13

StackNavigator 経由で現在の画面に移動したときに、特定の位置にスクロールするように ScrollView に指示することは可能ですか?

2 つの画面があります。メニューとアイテム。メニューは、項目ごとに 1 つのボタンのリストです。アイテム画面には、ScrollView を使用して構築されたカルーセルと、各アイテムの画像と詳細な説明が含まれています。

メニュー画面のボタンをクリックすると、アイテム画面に移動し、ボタンが表すアイテムまで自動的にスクロールしたいと考えています。

StackNavigator を次のように使用するときにパラメーターを渡すことができると読みましたが、アイテム画面でそのパラメーターを読み取る方法がわかりません。

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

これは React Native で可能なことですか?どうすればよいですか? それとも、間違ったナビゲーターを使用していますか?

これは、私の 2 つの画面の単純化されたバージョンです。

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 をターゲットにしていますが、理想的にはクロスプラットフォーム ソリューションが存在する可能性があります。

4

4 に答える 4