react native 引导页

//引导页

import React, { useEffect, useState } from "react";

import {
  TouchableRipple,
} from "react-native-paper";
import {
  StyleSheet,
  View,
  StatusBar,
  Dimensions,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
// 左右滑动组件
import ViewPager from '@react-native-community/viewpager';

// 引入 左右滑动的页面
import StartPage1 from "../StartPage1";
import StartPage2 from "../StartPage2";
import StartPage3 from "../StartPage3";



const deviceHeight = Dimensions.get("window").height;//获取屏幕高度
const deviceWidth = Dimensions.get("window").width;//获取屏幕宽读
const STATUS_BAR_HEIGHT = StatusBar.currentHeight;//获取状态栏高度


function Banner() {
  const navigation = useNavigation();

  return (
    <ViewPager style={styles.container} initialPage={0}>
      <View key="1">
    {/*左右滑动的页面（也可以是图片等）*/}
        <StartPage1 />
      </View>
      <View key="2">
        <StartPage2 />
      </View>
      <View key="3">
        <StartPage3 />
      </View>
    </ViewPager>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: deviceHeight,
    width: deviceWidth,
  },
});

export default Banner;

@react-native-community/viewpager-JavaScript中文网-JavaScript教程资源分享门户