基于react-native-swiper的轮播图

安装组件

npm install react-native-swiper -S

封装组件SwiperComponent

import React, {useEffect} from 'react';
import {View, Image, StyleSheet, TouchableOpacity} from 'react-native';
import Swiper from 'react-native-swiper';
import {pxToPd} from '../../common/js/device';
import {useNavigation} from '@react-navigation/native';

const SlideItem = ({item, onClick}) => {
  const slideClickHandle = row => {
    if (row.isClick) {
      onClick && onClick(row);
    }
  };
  return (
    <View style={styles.slide}>
      <TouchableOpacity
        style={styles.touchImage}
        onPress={() => slideClickHandle(item)}>
        <Image source={{uri: item.image}} style={styles.image} />
      </TouchableOpacity>
    </View>
  );
};

function SwiperComponent({items}) {
  const navigation = useNavigation();

  const slideEventHandle = row => {
    console.log('[]', row);
    navigation.navigate('List');
  };
  useEffect(() => {
    return () => {};
  }, []);
  return (
    <>
      <View style={styles.container}>
        <Swiper
          style={styles.wrapper}
          autoplay={true}
          dotStyle={styles.dot}
          activeDotStyle={styles.activeDot}>
          {items.map((item, index) => (
            <SlideItem key={index} item={item} onClick={slideEventHandle} />
          ))}
        </Swiper>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: pxToPd(400),
  },
  wrapper: {},
  dot: {
    backgroundColor: '#999',
  },
  activeDot: {
    backgroundColor: '#eb5747',
  },
  slide: {
    flex: 1,
  },
  image: {
    borderRadius: pxToPd(24),
    width: '93.6%',
    height: '100%',
    resizeMode: 'cover',
  },
  touchImage: {
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default SwiperComponent;

使用组件

// 轮播图
import SwiperComponent from '../../componets/SwiperComponent';
//轮播图
  let [banner, setBanner] = useState([
    {
      image:""
      isClick: true,
    },
    {
      image:"",
      isClick: false,
    },
  ]);
<SwiperComponent items={banner} />

device.js

import {Dimensions, StatusBar, Platform} from 'react-native';
//RN中的尺寸单位为dp，设计稿的单位为px

// 获取屏幕尺寸
const windowDimensions = Dimensions.get('window');

//设备宽度，单位pd
const deviceWidthDp = windowDimensions.width;

//设备高度
const windowHeight = windowDimensions.height;

// 获取状态栏高度
const statusBarCurrentHeight =
  Platform.OS === 'android' ? StatusBar.currentHeight : 20;

//设计稿宽度（这里为750px），单位px
const uiWidthPx = 750;

//px转pd（设计稿中的px转RN中的dp）
//计算公式：设计稿元素宽度（px）/设计稿总宽度（px）=元素的宽度（dp）/屏幕的总宽度（dp）
export const pxToPd = uiElePx => {
  return (uiElePx * deviceWidthDp) / uiWidthPx;
};

//状态栏高度
export const statusBarHeight = () => {
  return statusBarCurrentHeight;
};

// 计算应用程序窗口的高度
// 获取导航栏高度（如果有的话） navigationBarHeight = 0; // 设置默认值
export const appWindowHeight = (navigationBarHeight = 0) => {
  return windowHeight - navigationBarHeight;
};