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