Question

我有旋转木马组件，它工作正常。现在我必须添加顶部导航（请参阅示例视频https://vimeo.com/250800638）。我想创建此面板http://joxi.ru/4AkgzvOuM9YYQA

我没有找到任何开源示例，谷歌也没有帮助我。此外，我尝试从头开始创建此导航，但我不明白如何将活动元素移动到中心。

import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';


export default class App extends React.Component {
  render() {
    return (
      <ScrollView horizontal overScrollMode="always" contentContainerStyle={styles.scrollContainer}>
        <View style={styles.item}><Text>Item 1</Text></View>
        <View style={styles.item}><Text>Item 2</Text></View>
        <View style={styles.item}><Text>Item 3</Text></View>
        <View style={styles.item}><Text>Item 4</Text></View>
        <View style={styles.item}><Text>Item 5</Text></View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  scrollContainer: {
    flexDirection: 'row', 
    marginTop: 50, 
    justifyContent: 'space-between',
    paddingHorizontal: 10,
  },
  item: {
    width: 100,
  }
});

我想要一个允许设置活动项目的方法（见上面的视频）。

此外，scrollView不允许将最后和第一项置于中心

Answer 1

此视频是您的代码示例吗？或者你想要实现的目标？您可以在循环播放过程中为列表项的位置设置动画。您是否有任何代码可以查看您的位置？

旋转木马的水平可滚动导航

1 个答案: