滚动视图轮播中的居中视图对水平按钮的本机列表做出反应 - 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>;