ViewUtil.js 970 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. /**
  2. * 轮播图指示器
  3. * @邠心vbe on 2024/02/07
  4. */
  5. import React from 'react';
  6. import { StyleSheet, Text, View } from 'react-native';
  7. export const PagerView = ({index=0,total=0}) => (
  8. <View style={styles.pagerView}>
  9. <View style={styles.pagerContent}>
  10. <Text style={styles.pagerText} numberOfLines={1}>{index}</Text>
  11. <Text style={styles.pagerText} numberOfLines={1}>{"/"}</Text>
  12. <Text style={styles.pagerText} numberOfLines={1}>{total}</Text>
  13. </View>
  14. </View>
  15. );
  16. const styles = StyleSheet.create({
  17. pagerView: {
  18. left: 0,
  19. right: 0,
  20. bottom: 8,
  21. alignItems: 'center',
  22. position: 'absolute',
  23. },
  24. pagerContent: {
  25. paddingTop: 2,
  26. paddingLeft: 8,
  27. paddingRight: 8,
  28. paddingBottom: 2,
  29. borderRadius: 30,
  30. alignItems: 'center',
  31. flexDirection: 'row',
  32. justifyContent: 'center',
  33. backgroundColor: 'rgba(0,0,0,.4)'
  34. },
  35. pagerText: {
  36. color: textLight,
  37. fontSize: 12,
  38. padding: 1
  39. }
  40. })