当我们通过StackNavigator导航到当前屏幕时,是否可以告诉ScrollView滚动到特定位置?
我有两个屏幕;菜单和项目。菜单是按钮列表,每个项目一个。 “项目”屏幕包含使用ScrollView构建的轮播,其中包含每个项目的图片和详细说明。
当我单击菜单屏幕中的按钮时,我想导航到项目屏幕,并自动滚动到按钮所代表的项目。
我读到你可以在使用StackNavigator时传递参数:但是我不知道如何在我的Items屏幕中读出该参数。
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>
)
}
}
P.S我目前专门针对Android,但理想情况下可能会有跨平台解决方案。
答案 0 :(得分:3)
我读到你可以在使用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参数,这意味着您必须计算要滚动到的确切位置 - 将每个滚动项的宽度乘以您要滚动到的项的索引。如果每个项目都涉及到填充,则会变得更加痛苦。
答案 1 :(得分:1)
是的,可以使用scrollTo
方法实现这一点 - 请参阅docs。您可以在componentDidMount
中调用此方法。您只需要将其称为this.myScroll.scrollTo(...)
即可。请注意,如果您的项目数组都属于同一类型,则应使用FlatList
代替。
答案 2 :(得分:0)
以下是列出状态名称,然后单击按钮滚动到第五种状态的示例。我刚刚从React Native Add Items to ScrollView using Loop扩展了此示例。希望这会帮助你。 如果要直接滚动到任何索引,可以使用componentdidmount方法。
ImportError: No module named pexpect
答案 3 :(得分:0)
这是滚动到ID为的道具的示例。
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity, Dimensions, Alert, findNodeHandle, Image } from 'react-native';
class MyCustomScrollToElement extends Component {
constructor(props) {
super(props)
this.state = {
}
this._nodes = new Map();
}
componentDidMount() {
const data = ['First Element', 'Second Element', 'Third Element', 'Fourth Element', 'Fifth Element' ];
data.filter((el, idx) => {
if(el===this.props.id){
this.scrollToElement(idx);
}
})
}
scrollToElement =(indexOf)=>{
const node = this._nodes.get(indexOf);
const position = findNodeHandle(node);
this.myScroll.scrollTo({ x: 0, y: position, animated: true });
}
render(){
const data = ['First Element', 'Second Element', 'Third Element', 'Fourth Element', 'Fifth Element' ];
return (
<View style={styles.container}>
<ScrollView ref={(ref) => this.myScroll = ref} style={[styles.container, {flex:0.9}]} keyboardShouldPersistTaps={'handled'}>
<View style={styles.container}>
{data.map((elm, idx) => <View ref={ref => this._nodes.set(idx, ref)} style={{styles.element}}><Text>{elm}</Text></View>)}
</View>
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexGrow: 1,
backgroundColor:"#d7eff9"
},
element:{
width: 200,
height: 200,
backgroundColor: 'red'
}
});
export default MyCustomScrollToElement;
答案 4 :(得分:0)
对于iOS-使用ScrollView
的{{1}}属性的最佳方法。这样,它将最初在正确的位置进行渲染。使用contentOffset
将在第一个之后添加额外的多余渲染。
对于Android-除scrollTo