How to use the react-native.StyleSheet.flatten function in react-native

const pickedThemeStyle = pickBy(themeStyle, (value, key) => selectors.includes(key));
        const pickedParentStyle = pickBy(parentStyle, (value, key) => selectors.includes(key));

        // 将样式按顺序合并：主题样式，父组件样式，行内样式
        const mergedStyle = deepMerge(
          {},
          ...Object.values(pickedThemeStyle),
          ...Object.values(pickedParentStyle),
        );
        const pickedStyle = pickBy(
          mergedStyle,
          (value, key) => !(typeof value === 'object' || mapPropToStyles.includes(key)),
        );

        const nonNullStyle = Array.isArray(style) ? style.filter(i => i) : style;
        const flattenedStyle = StyleSheet.flatten(nonNullStyle);
        const componentStyle = Object.assign({}, pickedStyle, flattenedStyle);

        return {
          styleSheets: mergedStyle, // 原始样式表
          componentStyle,
        };
      }

renderDropDown(isOpen) {
    if (isOpen == true) {
      var style = [styles.defaultContainer, StyleSheet.flatten(this.props.containerStyle)]
      var source = this.props.imageSrc
      var backgroundColor = this.props.containerStyle.backgroundColor
      switch (this.state.type) {
        case 'info':
          style = [styles.defaultContainer, {backgroundColor: this.props.infoColor}]
          source = require('./assets/info.png')
          backgroundColor = this.props.infoColor
          break;
        case 'warn':
          style = [styles.defaultContainer, {backgroundColor: this.props.warnColor}]
          source = require('./assets/warn.png')
          backgroundColor = this.props.warnColor
          break;
        case 'error':
          style = [styles.defaultContainer, {backgroundColor: this.props.errorColor}]
          source = require('./assets/error.png')

public render(): React.ReactNode {
    const { style, isAnimated } = this.props;
    const { container, shape, left, right } = this.getComponentStyle(StyleSheet.flatten(style));
    const directionStyle: StyleType = this.getDirectionStyle();

    const Component = isAnimated ? Animated.View : View;

    return (
      
        
        
      
    );
  }
}

const getRotationFromStyle = (style) => {
  if (!style) return {};
  let flattenedStyle = style;
  if (isNumber(style)) {
    flattenedStyle = StyleSheet.flatten(style);
  }
  const rotationInfo = flattenedStyle.transform ? {
    rotate: flattenedStyle.transform.find(i => i.rotate),
    rotateX: flattenedStyle.transform.find(i => i.rotateX),
    rotateY: flattenedStyle.transform.find(i => i.rotateY),
  } : {};

  if (rotationInfo === {}) return {};

  return rotationInfo;
};

export function filtersCss (styles, parent) {
  if (!parent) return null
  const style = StyleSheet.flatten(styles[parent.name]) || {}
  return { ...style }
}

_calcPosition() {
    const dimensions = Dimensions.get('window');
    const windowWidth = dimensions.width;
    const windowHeight = dimensions.height;

    const dropdownHeight = (this.props.dropdownStyle && StyleSheet.flatten(this.props.dropdownStyle).height) ||
      StyleSheet.flatten(styles.dropdown).height;

    const bottomSpace = windowHeight - this._buttonFrame.y - this._buttonFrame.h;
    const rightSpace = windowWidth - this._buttonFrame.x;
    const showInBottom = bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;
    const showInLeft = rightSpace >= this._buttonFrame.x;

    let style = {
      height: dropdownHeight,
      top: showInBottom ? this._buttonFrame.y + this._buttonFrame.h : Math.max(0, this._buttonFrame.y - dropdownHeight),
    };

    if (showInLeft) {
      style.left = this._buttonFrame.x;
    } else {
      const dropdownWidth = (this.props.dropdownStyle && StyleSheet.flatten(this.props.dropdownStyle).width) ||

handleBubbleToNext() {
    if (
      isSameUser(this.props.currentMessage, this.props.nextMessage) &&
      isSameDay(this.props.currentMessage, this.props.nextMessage)
    ) {
      return StyleSheet.flatten([
        styles[this.props.position].containerToNext,
        this.props.containerToNextStyle[this.props.position],
      ]);
    }
    return null;
  }

navigationOptions: ({ navigation }) => ({


      headerStyle: { backgroundColor: '#ffffff', borderBottomColor: "transparent", shadowColor: 'transparent', elevation: 0, ...StyleSheet.flatten(themeStyles.headerStyle) },
      headerTitleStyle: { ...StyleSheet.flatten(themeStyles.headerTitleStyle) },
      headerBackTitleStyle: { ...StyleSheet.flatten(themeStyles.headerTitleStyle) },
      headerTintColor: StyleSheet.flatten(themeStyles.headerTitleStyle).color,

    }),

private getFlattenedTabWidth = (style: StyleProp) => {
    const tabStyle = StyleSheet.flatten(style);

    return tabStyle ? tabStyle.width : undefined;
  };