Выравнивание по центру React-Native ScrollView с пользовательской стартовой позицией - PullRequest
Новая
       65

Выравнивание по центру React-Native ScrollView с пользовательской стартовой позицией

0 голосов
/ 29 июня 2019

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

Практически все дети при прокрутке должны быть выровнены по центру. Также первый дочерний элемент должен начинаться с конца ширины устройства.

прогресс на данный момент -> https://snack.expo.io/@sefeniyuk/scrollview-alignment

спасибо. 

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, Dimensions, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

const { width } = Dimensions.get('window');
const cardPaddingHorizontal = 2;
const cardWidth = width - cardPaddingHorizontal * 2;
const cardleftOffset = width - cardWidth / 3.5;
const initialCardShown = width - cardleftOffset;

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView         
          horizontal
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={1}
          style={styles.style}
          contentContainerStyle={styles.contentContainerStyle}
          snapToAlignment="center"
          decelerationRate="fast"
        >
          {[1, 2, 3, 4].map((num, i) => {
            return (
              <TouchableOpacity key={i} style={styles.card}>
                <View style={styles.content}>
                <Text style={styles.text}>{num}</Text>
                </View>
              </TouchableOpacity>
            );
          })}

        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
    contentContainerStyle: {
    width: cardWidth * 4
  },
  style: {
    paddingLeft: cardleftOffset
  },
  card: {
    backgroundColor: 'red',
    width: cardWidth,
    height: cardWidth,
    margin: cardPaddingHorizontal,
    elavation: 10
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 40,
    color: 'white'
  }
});
...