FlatList水平滚动

Question

我正在创建onBoarding屏幕，我已经创建了每个屏幕项目作为一个组件，并尝试用Flatlist来呈现它们，到目前为止一切都很顺利，但是当我滑动Flatlist来查看其他屏幕时，它不工作，它滑动40%并强制显示当前屏幕，似乎有一些灵活的样式问题，我可以找出它，请建议。

下面是解释视频:https://youtube.com/shorts/pHbTs7ifMww

OnBoardingScreen.js

import React, { useState } from 'react';
import { Dimensions, FlatList, SafeAreaView, View, StyleSheet, Text, Image } from 'react-native';
const { width, height } = Dimensions.get('window');
const COLORS = {primary : '#ff006c', white: '#ffffff', black: '#000000'};
const slides = [
  {
    id: '1',
    image: require('../../images/OnBoardingImages/1.png'),
    title: 'You can mark time',
    description: 'Lorem ipsum is a placeholder text commonly used to demonstrate the visual',
  },
  {
    id: '2',
    image: require('../../images/OnBoardingImages/2.png'),
    title: 'You can mark time',
    description: 'Lorem ipsum is a placeholder text commonly used to demonstrate the visual',
  },
  {
    id: '3',
    image: require('../../images/OnBoardingImages/3.png'),
    title: 'You can mark time',
    description: 'Lorem ipsum is a placeholder text commonly used to demonstrate the visual',
  },
]
const Slide = ({item}) => {
  return (
    <View style={styles.slideView}>
      <Image source={item.image} style={styles.slideImage} />
      <Text style={styles.slideTitle}>{item.title}</Text>
      <Text style={styles.slideDescription}>{item.description}</Text>
    </View>
  );
}
const OnBoardingScreen = ({ navigation }) => {
  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
  const Footer = () => {
    return (
      <View style={styles.footer}>
        <View style={styles.pagination}>
          {slides.map((_, index) => (<View key={index} style={[styles.paginationItem, currentSlideIndex == index && {backgroundColor: 'grey'} ]} /> ))}
        </View>
      </View>
    );
  };
  return (
    <SafeAreaView style={styles.root}>
      <FlatList 
        data={slides}
        contentContainerStyle={{flex: 1}}
        showsHorizontalScrollIndicator={false}
        horizontal
        pagingEnabled
        renderItem={({item}) => <Slide item={item} />} />
      <Footer />
    </SafeAreaView>
  
  );
};
export default OnBoardingScreen;
const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: COLORS.white,
  },
  slideView: {
    alignItems: 'center',
  },
  slideImage: {
    height: '75%',
    width: width,
    resizeMode: 'contain',
  },
  slideTitle: {
    color: COLORS.primary,
    fontSize: '22',
    fontWeight: 'bold',
    marginVertical: 10,
    paddingHorizontal: 10,
    textAlign: 'center',
  },
  slideDescription: {
    fontSize: 18,
    paddingHorizontal: 20,
    color: 'grey',
    textAlign: 'center',
  },
  footer: {
    height: height * 0.25,
    paddingHorizontal: 20,
    justifyContent: 'space-between',
  },
  pagination: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 20,
  },
  paginationItem: {
    height: 10,
    width: 10,
    backgroundColor: COLORS.primary,
    marginHorizontal: 3,
    borderRadius: 50,
  },
});

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Navigation from './src/navigation';
export default function App() {
  return (
    <View style={styles.container}>
      <Navigation />
      <StatusBar style="auto" />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Answer 1

更新此样式

slideView: {
    alignItems: 'center',
    width: width
  },