Странная сглаживание артефактов с помощью реакции native на вложенные поставленные компоненты - PullRequest
Новая
       45

Странная сглаживание артефактов с помощью реакции native на вложенные поставленные компоненты

0 голосов
/ 22 мая 2019

Я создаю компонент, который анимирует группу кнопок в упругом порядке, используя react-native-pose.Сами кнопки используют позу для анимации нажатого состояния.Я почти понял, как я этого хочу, хотя я не уверен, что все делаю правильно.

Это то, чего я хочу достичь ... enter image description here

... Однако текст выглядит ужасно, словно у него есть jpg-артефакты:

enter image description here

App.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>
    );
  }
}

Button.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>
    );
  }
}

Может ли кто-нибудь подсказать, почему текст, а также закругленные углы выглядят такими искусными и с низким разрешением?

...