ios 水平滚动视图捕捉反应原生
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39849648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal scrollview snapping react native
提问by Srinivas Guni
Hi I am trying to achieve scrollviewsnap to center
like below giflink
嗨，我正在尝试scrollview像下面的gif链接一样实现对齐中心
But unable to do so. Following is my react native code to achieve this.
但无能为力。以下是我的反应本机代码来实现这一点。
or is there any method to scroll to particular index of scrollview elements like android ?
或者是否有任何方法可以滚动到滚动视图元素的特定索引，例如 android ？
Any help would be appreciated. Thanks in advance
任何帮助，将不胜感激。提前致谢
<ScrollView
style={[styles.imgContainer,{backgroundColor:colorBg,paddingLeft:20}]}
automaticallyAdjustInsets={false}
horizontal={true}
pagingEnabled={true}
scrollEnabled={true}
decelerationRate={0}
snapToAlignment='center'
snapToInterval={DEVICE_WIDTH-100}
scrollEventThrottle={16}
onScroll={(event) => {
var contentOffsetX=event.nativeEvent.contentOffset.x;
var contentOffsetY=event.nativeEvent.contentOffset.y;
var cellWidth = (DEVICE_WIDTH-100).toFixed(2);
var cellHeight=(DEVICE_HEIGHT-200).toFixed(2);
var cellIndex = Math.floor(contentOffsetX/ cellWidth);
// Round to the next cell if the scrolling will stop over halfway to the next cell.
if ((contentOffsetX- (Math.floor(contentOffsetX / cellWidth) * cellWidth)) > cellWidth) {
cellIndex++;
}
// Adjust stopping point to exact beginning of cell.
contentOffsetX = cellIndex * cellWidth;
contentOffsetY= cellIndex * cellHeight;
event.nativeEvent.contentOffsetX=contentOffsetX;
event.nativeEvent.contentOffsetY=contentOffsetY;
// this.setState({contentOffsetX:contentOffsetX,contentOffsetY:contentOffsetY});
console.log('cellIndex:'+cellIndex);
console.log("contentOffsetX:"+contentOffsetX);
// contentOffset={{x:this.state.contentOffsetX,y:0}}
}}
>
{rows}
</ScrollView>
回答by Vasil Enchev
You don't need other libraries you can do that with ScrollView. All you need is to add the following props in your component.
您不需要其他库就可以使用 ScrollView 做到这一点。你所需要的只是在你的组件中添加以下道具。
horizontal= {true}
decelerationRate={0}
snapToInterval={200} //your element width
snapToAlignment={"center"}
Check this snack for more details on how to implement it https://snack.expo.io/H1CnjIeDb
查看此小吃以了解有关如何实施的更多详细信息 https://snack.expo.io/H1CnjIeDb
回答by phatmann
Use the pagingEnabledproperty in ScrollView.
使用中的pagingEnabled属性ScrollView。
const screenHeight = Dimensions.get('window').height;
class Screen extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ScrollView pagingEnabled>
<Page1 style={{height: screenHeight}} />
<Page2 style={{height: screenHeight}} />
</ScrollView>
);
}
}
回答by Georgios
There are several options. Here are two that I've tried and work fine. I prefer the second one because as its doc says "like ListView, this can render hundreds of pages without performance issue".
有几种选择。这里有两个我尝试过并且工作正常。我更喜欢第二个，因为正如它的文档所说的“像 ListView，这可以在没有性能问题的情况下呈现数百个页面”。
回答by TalP
If you don't want to use snapToInterval because of the misalignment for long lists you can use snapToOffsets which is more precise.
如果由于长列表未对齐而不想使用 snapToInterval，则可以使用更精确的 snapToOffsets。
for example:
例如：
const { width } = Dimensions.get('window');
this.IMAGE_WIDTH = width * (1 / 2.5)
this.image_margin = 5
this.nishhar = width - ((this.IMAGE_WIDTH + this.image_margin) * 2 + this.image_margin * 2)
dataNum = [1, 2, 3, 4, 5, 6]
return (<FlatList
data={dataNum}
renderItem={item => {
return (
<View style={{
backgroundColor: item.index % 2 == 0 ? 'red' : 'blue',
width: this.IMAGE_WIDTH,
height: this.IMAGE_WIDTH,
marginLeft: this.image_margin,
marginRight: this.image_margin,
}}>
</View>)
}}
keyExtractor={this.keyGenerator}
horizontal={true}
snapToAlignment={"start"}
snapToOffsets={[...Array(dataNum.length)].map((x, i) => (i * (this.IMAGE_WIDTH + 2 * this.image_margin) - (this.nishhar * 0.5)))}
decelerationRate={"fast"}
pagingEnabled
/>)
or you can also checkout this example: https://snack.expo.io/SyWXFqDAB
或者您也可以查看此示例：https: //snack.expo.io/SyWXFqDAB
