滚动视图轮播中的居中视图对水平按钮的本机列表做出反应 - javascript

如何解决滚动视图轮播中的居中视图对水平按钮的本机列表做出反应 - javascript

我从 react native docs 尝试了很多属性，在 google 上进行了一些搜索，尤其是 stackOverflow，但似乎没有一个可以同时在 android 和 ios 平台上运行我不知道在这种情况下使用哪个. 我在 ScrollView 中有一个按钮列表 20 我希望视图最初位于中心的按钮上。

const 按钮 = [...Array(21).keys()]

<ScrollView
    horizontal
    showsHorizontalScrollIndicator={false}
    >
    {buttons.map(button=> <TouchableOpacity key={button}>button</TouchableOpacity>)}
  </ScrollView>

我希望第 10 号按钮位于屏幕中央，因为对初始视图帮助表示赞赏。

解决方法

在我看来，更好和最小的解决方案是：

  // simple array that has numbers from 0 till 20
  const buttons = [...Array(21).keys()];
  const [scrollView,setScrollView] = useState(null);

  const scrollToIndex = (contentSize) => {
    // getting desired index of button or you can simply do e.g. (const index = 2)
    // for this example you can pass index = 10 or 9 to be centered perfectly or contentSize / 2
    const index = options.reduce((acc,option,idx) => (option === 'desired-button-to-be-shown' ? (acc = idx) : acc));
    // setting view to be centered on that index
    scrollView.scrollTo({ x: (contentSize / options.length) * (index - 1) });
  };

  // this is your ScrollView Carousel / Slider
  <ScrollView
    // saving SrcollView reference in state
    ref={(scrollViewRef) => setScrollView(scrollViewRef)}
    horizontal
    // getting the width of the whole ScrollView (all your content e.g. images / buttons)
    onContentSizeChange={(contentSize) => scrollToIndex(contentSize)}
    showsHorizontalScrollIndicator={false}>
    {buttons.map((button) => (
      <TouchableOpacity key={button}>button</TouchableOpacity>
    ))}
  </ScrollView>;