1

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,
  },

我究竟做错了什么？

4

0 回答 0