添加额外的 iPhone X 样式

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

我收到错误消息“您正试图在一个本应不可变且已被冻结的对象上设置值为‘14’（间距 =14）的键 'paddingBottom'。如何执行此操作有什么建议吗？

Answer 1

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

添加额外的 iPhone X 样式

add additional style if iPhoneX

reactjs

react-native

react-native-android

react-native-ios