0

我正在创建一个组件，该组件使用react-native-pose. 他们自己的按钮使用姿势来动画按下状态。尽管我不确定我做事是否正确，但我几乎已经找到了我想要的样子。

这就是我想要达到的... 在此处输入图像描述

...但是文字看起来很糟糕，就像上面有 jpg 人工制品：

在此处输入图像描述

应用程序.js

import React, { Component } from 'react';
import styled from 'styled-components';
import posed from 'react-native-pose';
import Button from './src/components/Button';

const ScreenContainer = styled.View({
  flex: 1,
  padding: 20,
  marginTop: 100
});

const Buttons = posed.View({
  visible: {
    staggerChildren: 100
  },
  hidden: {
    staggerChildren: 100
  }
});

export default class App extends Component {
  state = {
    buttonPose: 'hidden'
  };

  items = [
    { id: 0, label: 'One' },
    { id: 1, label: 'Two' },
    { id: 2, label: 'Three' }
  ];

  componentDidMount = () => {
    this.setState({
      buttonPose: 'visible'
    });
  };

  render() {
    return (
      <ScreenContainer>
        <Buttons pose={this.state.buttonPose}>
          {this.items.map(item => (
            <Button label={item.label} key={item.id} />
          ))}
        </Buttons>
      </ScreenContainer>
    );
  }
}

按钮.js

import React, { PureComponent } from 'react';
import { TouchableWithoutFeedback } from 'react-native';
import styled from 'styled-components';
import posed from 'react-native-pose';

const Container = styled(
  posed.View({
    visible: {
      opacity: 1,
      x: 0
    },
    hidden: {
      opacity: 0,
      x: -100
    }
  })
)({
  marginBottom: 20
});

const Background = styled(
  posed.View({
    // If I comment out these poses the problem goes away
    pressIn: {
      scale: 1.1
    },
    pressOut: {
      scale: 1
    }
  })
)({
  padding: 20,
  backgroundColor: '#f9415d',
  borderRadius: 10
});

const Label = styled.Text({
  fontSize: 18,
  color: 'white',
  textAlign: 'center'
});

export default class Button extends PureComponent {
  state = {
    buttonPose: 'pressOut'
  };

  onPressIn = () => {
    this.setState({
      buttonPose: 'pressIn'
    });
  };

  onPressOut = () => {
    this.setState({
      buttonPose: 'pressOut'
    });
  };

  componentDidMount = () => {};

  render() {
    const { onPressIn, onPressOut } = this;
    const { buttonPose } = this.state;
    const { label } = this.props;
    return (
      <Container>
        <TouchableWithoutFeedback onPressIn={onPressIn} onPressOut={onPressOut}>
          <Background pose={buttonPose} withParent={false}>
            <Label>{label}</Label>
          </Background>
        </TouchableWithoutFeedback>
      </Container>
    );
  }
}

谁能提供任何关于为什么文本和圆角看起来如此人工和低分辨率的见解？

4

0 回答 0