@uiw/react-native/lib/Pagination/DirText.js

UIW for React Native

import React, { useRef, useState, useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Icon from '../Icon';
import Button from '../Button';
export let containerSize;

(function (containerSize) {
  containerSize[containerSize["small"] = 30] = "small";
  containerSize[containerSize["default"] = 36] = "default";
  containerSize[containerSize["large"] = 44] = "large";
})(containerSize || (containerSize = {}));

export let contentSize;

(function (contentSize) {
  contentSize[contentSize["small"] = 12] = "small";
  contentSize[contentSize["default"] = 18] = "default";
  contentSize[contentSize["large"] = 26] = "large";
})(contentSize || (contentSize = {}));

const DirText = props => {
  const {
    size,
    direction,
    disabled,
    icon,
    onPageChange
  } = props;
  const dirText = useRef(direction === 'left' ? '上一页' : '下一页').current;
  const [disabledStyle, setDisabledStyle] = useState('#3d3d3d');
  useEffect(() => {
    setDisabledStyle(disabled ? '#d9d9d9' : '#3d3d3d');
  }, [disabled]);
  return <View style={[styles.containerStyle, {
    minWidth: containerSize[size],
    height: containerSize[size],
    paddingHorizontal: icon ? 0 : 5
  }]}>
      <Button bordered={false} disabled={disabled} onPress={() => {
      onPageChange(direction === 'left' ? 'prev' : 'next');
    }}>
        {icon ? <Icon name={direction} size={contentSize[size]} color={disabledStyle} /> : <Text style={{
        fontSize: contentSize[size],
        color: disabledStyle
      }}>{dirText}</Text>}
      </Button>
    </View>;
};

export const containerStyle = {
  borderStyle: 'solid',
  borderWidth: 1,
  borderColor: '#d9d9d9',
  borderRadius: 2,
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center'
};
const styles = StyleSheet.create({
  containerStyle
});
export default DirText;