scrollView 轮播中的居中视图反应原生水平按钮列表 - javascript

Question

我尝试了很多来自 React Native 文档的属性，在 google 上进行了一些搜索，尤其是 Whosebug，但是 none 似乎在两个平台上都有效 android 和ios 同时我不知道在这种情况下使用哪一个。我在 ScrollView 中有一个按钮列表 20 我希望视图最初位于中心的按钮上。

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

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

我希望 10 号按钮位于屏幕中央，感谢初始视图帮助。

Answer 1

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

  // 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>;

scrollView 轮播中的居中视图反应原生水平按钮列表 - javascript

Centering view in scrollView carousel react native list of horizontal buttons - javascript

javascript

scrollview

centering

carousel

react-native