Равномерно видимый элемент React Собственные элементы ScrollView

Question

В настоящее время у меня есть ScrollView, в котором перечислены текстовые элементы. Я разбил его на 4 страницы на каждой странице. Например, я перечисляю названия месяцев, и это хорошо работает, потому что 12 делится на 4. Я получаю 3 страницы, 4 элемента на страницу, где элементы расположены одинаково. Я делаю это, используя justifyContent: 'space-around'. Это заставляет мой пример работать с целью показать, как бы я хотел, чтобы вещи были выровнены, но он не гибкий, когда есть больше элементов

Если я добавлю дополнительный текстовый элемент под названием «ALL» в Начало, что я хотел бы, это весь март на странице 1, равномерно распределенный. Апр-июль на странице 2 выглядит так же, август-ноябрь на странице 3 - то же самое, а De c - на странице 4, слева. Я добавил закуску, а также код ниже. Надеюсь, я предоставил достаточно информации.

https://snack.expo.io/PjQ0EG6eq

import React, {Component} from "react";
import {
  View,
  ScrollView,
  useWindowDimensions,
  StyleSheet,
  Text
} from "react-native";
import moment from "moment"

const HorizontalTextCarousel = props => {
  const numberOfItems = React.Children.count(props.children);
  const itemsPerInterval = props.itemsPerInterval ? props.itemsPerInterval : 4;

  const [width, setWidth] = React.useState(0);
  const [totalIntervals, setTotalIntervals] = React.useState(0);

  const adjustContent = w => {
    setWidth(w);
    let t = Math.ceil(numberOfItems / itemsPerInterval);
    console.log(t)
    setTotalIntervals(t);
  };

  return (
    <View style={{width: '100%'}}>
      <ScrollView
        contentContainerStyle={[styles.scrollViewContainer, {width: `${100 * totalIntervals}%`}]}
        horizontal={true}
        alwaysBounceHorizontal={true}
        bounces={true}
        decelerationRate="fast"
        showsHorizontalScrollIndicator={false}
        scrollEventThrottle={200}
        onContentSizeChange={(w, h) => adjustContent(w)}
        pagingEnabled={true}>
        /*UNCOMMENT THE FOLLOWING LINE TO SEE THINGS NOT ALIGN CORRECTLY. 
        /WANT IT TO LOOK JUST LIKE IT DOES WHEN THE NUMBER OF ITEMS IS EVENLY
        DIVISIBLE, EXCEPT WITH AN EXTRA PAGE WITH 'DEC' ON IT*/

        //UNCOMMENT THIS
        <Text style={styles.monthText}>ALL<Text>
        {props.children}
      </ScrollView>
    </View>
  );
};

const getMonths = () =>
  [...Array(12)].map((_el, i) => (
    <Text style={styles.monthText} key={i.toString()}>
      {moment()
        .month(i)
        .format('MMM')}
    </Text>
  ));

class App extends Component {
  render() {
    return (
    <View style={{flex:1, width: '100%', backgroundColor:'blue'}}>
      <View style={{marginTop: 100}}>
        <HorizontalTextCarousel>
          {getMonths()}
        </HorizontalTextCarousel>
      </View>
    </View>
    );
  }
}

const styles = StyleSheet.create({
  scrollViewContainer: {          
    justifyContent: 'space-around',
    backgroundColor: 'blue',
  },
  monthText: {
    color: 'white',
    fontSize: 24
  }
})

export default App;

Answer 1

Я решил эту проблему, добавив функцию обертывания элементов для каждой страницы в другом представлении. Затем я разбиваю на страницы эти представления-оболочки вместо отдельных элементов.

Так что моя функция рендеринга выдает что-то вроде этого. Несмотря на то, что в представлении прокрутки имеется 6 элементов, я объединяю их в представления, содержащие не более 4 элементов в каждом представлении.

  return (
<View style={{width: '100%'}}>
  <ScrollView
    contentContainerStyle={{
      width: `${numberOfWrapperViews*100}%', //in this example this would be 200% b/c 2 wrapper views (Math.ceil(total items to render (6)/max items per page(4))
      backgroundColor: '`',
      justifyContent: 'space-evenly'
    }}
    horizontal={true}
    alwaysBounceHorizontal={true}
    bounces={true}
    decelerationRate="fast"
    showsHorizontalScrollIndicator={false}
    scrollEventThrottle={200}
    pagingEnabled={true}>
  <View
      style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly'}}>
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>ABC</Text> 
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>EFG</Text>
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>ABC</Text> 
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>EFG</Text>
    </View>
    <View
      style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly'}}>
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>HIJ</Text> 
      <Text style={{justifyContent: 'space-evenly', flexDirection: 'row'}}>KLM</Text>
    </View>
  </ScrollView>
</View>

); };