LayoutAnimation не очень хорошо работает с justifyContent: 'space-ween'

Что-то действительно раздражает меня с LayoutAnimation. Посмотрите видео и обратите внимание на скачок на прилавках.

Кроме того, вот репозиторий на RNPlay: https://rnplay.org/apps/atSZAA

Я использую простой конфиг здесь:

componentWillUpdate() {
   LayoutAnimation.easeInEaseOut();
}

Вот мой компонент:

<View style={{flexDirection: "row"}}>

    {
        this.props.editMode &&
        <TouchableHighlight style={[styles.listItemDeleteButton]} onPress={this.props.onPressDelete}>
            <Text style={{color: "white"}}>Delete</Text>
        </TouchableHighlight>
    }

    <TouchableHighlight style={styles.liRowContainer} onPress={this.props.onPress}>
        <View style={styles.li}>
            <Text style={styles.liText}>{this.props.ower.name}</Text>
            <Text style={styles.liCounter}>{this.props.ower.total}</Text>
        </View>
    </TouchableHighlight>
</View>

И вот мои стили:

  li: {
    backgroundColor: '#fff',
    borderBottomColor: '#eee',
    borderColor: 'transparent',
    borderWidth: 1,
    paddingLeft: 16,
    paddingRight: 16,
    paddingTop: 14,
    paddingBottom: 16,
    flexDirection: "row",
    flex: 1,
    justifyContent: 'space-between',
  },
  liRowContainer: {
    flexDirection: "row",
    justifyContent: "center",
    flex: 1,
  },
  liText: {
    color: '#333',
    fontSize: 16,
  },
  liCounter: {
    color: '#333',
    fontSize: 16,
    textAlign: "right",
  },
  listItemDeleteButton: {
      backgroundColor: "#FF4500",
      justifyContent: "center",
      flexDirection: "column",
      paddingRight: 10,
      paddingLeft: 10,
    borderBottomColor: "#F33F03",
    borderColor: 'transparent',
    borderWidth: 1,
  },

Что я делаю неправильно?

0 ответов

Другие вопросы по тегам