Question

我有一个辅助函数is.iphone（'x'）来检查iphone x，如果希望将某些样式添加到styles.icon和styles.textContainer以及styles.container中。这需要在render方法内部发生。但是，当我尝试运行代码时：

    const styles = {
  addToCartButton: {
    borderRadius: 0,
    width: windowWidth,
  },
  container: {
    overflow: 'hidden',

  },
  innerContainer: {
    width: 2 * windowWidth,
    flexDirection: 'row',
  },
  checkoutButton: {
    borderRadius: 0,
    width: windowWidth,
  },
  icon: {
    backgroundColor: accentColor,
  },
  textContainer: {},
}

export class CartButton extends Component {
  checkoutButtonColor = new Animated.Value(3)

  xOffset = new Animated.Value(-windowWidth)


  dynamicStyles = {
    transform: [ { translateX: this.xOffset } ],
  }

  checkoutDynamicStyles = {
    backgroundColor: this.checkoutButtonColor.interpolate({
      inputRange: [ 0, 3 ],
      outputRange: [ color('b'), accentColor ],
    }),
  }

  animate = () => {
    Animated.sequence([
      Animated.timing(this.xOffset, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true,
      }),
      Animated.timing(this.checkoutButtonColor, {
        toValue: 0,
        duration: 250,
        userNativeDriver: true,
      }),
    ]).start()
  }

    )
  }

  render () {
    if (is.iphone('x')) {
      styles.icon.paddingBottom = spacing
      styles.textContainer.paddingBottom = spacing
      styles.container.marginBottom = spacingSizes.large
    }
    return (
      <View style={styles.container}>
        <Animated.View style={[ styles.innerContainer, this.dynamicStyles ]}>
          {this.renderCheckout()}
          {this.renderAddToCart()}
        </Animated.View>
      </View>
    )
  }
}

我收到错误消息：“您试图在本该是不可变且已冻结的对象上将键'paddingBottom'设置为值'14'（spacing = 14）。如何提出任何建议？

Answer 1

更新代码，并将style={styles.container}替换为style={[styles.container, is.iphone('x') ? { marginBottom: spacing } : {}]}，并在使用图标样式的地方进行相同的操作。

如果iPhoneX添加其他样式

1 个答案: