Reactnative 原生react ：顶部的滑块位置

我想把滑块放在我屏幕的顶部.

玩styles号不会影响它的位置.

以下是我的代码:

import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import Swiper from 'react-native-swiper';
import SexScreen from './SexScreen';
import NameScreen from './NameScreen';
import BirthDateScreen from './BirthDateScreen';
import BirthLocationScreen from './BirthLocationScreen';
import BirthTimeScreen from './BirthTimeScreen';
// import other necessary components and styles

const OnboardingSwiper = () => {
  const swiperRef = useRef(null);

  const goToNextSlide = () => {
    swiperRef.current?.scrollBy(1);
  };

  const goToPreviousSlide = () => {
    swiperRef.current?.scrollBy(-1);
  };

  return (
    <View style={styles.container}>
      <Swiper
        loop={false}
        showsPagination={true}
        index={0}
        scrollEnabled={false}
        ref={swiperRef}
        activeDotColor="white"
        style={styles.swiper}
      >
        <SexScreen onNext={goToNextSlide} onBack={goToPreviousSlide} />
        <NameScreen onNext={goToNextSlide} onBack={goToPreviousSlide} />
        <BirthDateScreen onNext={goToNextSlide} onBack={goToPreviousSlide} />
        <BirthLocationScreen onNext={goToNextSlide} onBack={goToPreviousSlide} />
        <BirthTimeScreen onNext={goToNextSlide} onBack={goToPreviousSlide} />
        </Swiper>
    </View>
  );
};

const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'flex-start', // Ensure content is aligned to the top
    },
    swiper: {
        height: 'auto', // Adjust height as needed
    },
    // Other styles...
  });

const OnboardingScreen = () => {
    return <OnboardingSwiper />;
};

export default OnboardingScreen;