Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

无论如何我都获取不到 setNativeProps 这个方法,v0.68.2 #661

Closed
zhuqingyv opened this issue Nov 6, 2022 · 7 comments
Closed
Labels

Comments

@zhuqingyv
Copy link

zhuqingyv commented Nov 6, 2022

import { Component, createRef, cloneElement } from 'react';
import { View, Text, UIManager, findNodeHandle } from 'react-native';

const uuid = () => {
  const s = [];
  const hexDigits = "0123456789abcdef";

  for (let i = 0; i < 36; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  };

  s[14] = "4";
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
  s[8] = s[13] = s[18] = s[23] = "-";

  return s.join('');
};

const containerStyle = {
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'flex-start',
  alignItems: 'flex-start',
  flexWrap: 'wrap',
  overflow: 'hidden'
};

const isText = (child) => {
  if (!child) return null;
  const { props } = child;
  const { children } = props;
  const isString = typeof children === 'string';
  if (isString) return children;
  return null;
};

const childrenToArray = (children) => {
  if (children instanceof Array) return children;
  return [children];
};

const overflow = (childRect, parentRect) => {
  if ((childRect.pageY + childRect.height) > (parentRect.y + parentRect.height) || (childRect.pageX + childRect.width) > (parentRect.x + parentRect.width)) return true;
};

export default class Label extends Component {
  renderListRef = [];

  id = uuid();

  constructor() {
    super();
    globalThis.aa = this;
  }

  resolveChilden = (_children) => {
    this.renderListRef = [];
    const children = childrenToArray(_children);
    const renderList = [];
    let _index = 0;
    children.forEach((child, index) => {
      const text = isText(child);


      if (text === null) {
        const ref = this.renderListRef[_index] = createRef()
        _index += 1;
        return renderList.push(cloneElement(
          child,
          { ref, key: `${this.id}-${index}` }
        ));
      };

      for (let i = 0;i<text.length;i++) {
        const ref = this.renderListRef[_index] = createRef()
        _index += 1;
        renderList.push(
          cloneElement(child, {
            ref,
            key: `${this.id}-${index}-${i}`
          }, [text[i]])
        )
      };

    });

    return renderList;
  };

  onLayout = (event) => {
    const {} = this.props
    const { layout } = event.nativeEvent;
    let shouldEs = false;

    for (let i = this.renderListRef.length - 1; i > 0; i--) {
      console.log(`this.renderListRef[${i}]`)
      console.log(this.renderListRef[i].current.measure); // undefined
      // UIManager.measure(findNodeHandle(this.renderListRef[i].current), (...arg) => {
      //   const [x, y, width, height, pageX, pageY] = arg;
      //   const isOverFlow = overflow({ x, y, width, height, pageX, pageY}, layout);
      //   if (isOverFlow) {
      //     shouldEs = true;
      //     console.log(`this.renderListRef[${i}].setNativeProps`)
      //     console.log(this.renderListRef[i].current)
      //   } else {

      //   };
      // });
      // this.refs[CHILD_REF].setNativeProps({
      //   opacity: value
      // });
    };
  };

  render() {
    const { children } = this.props;

    return (
      <View style={this.style} onLayout={this.onLayout}>
        {this.resolveChilden(children)}
      </View>
    )
  };

  get style() {
    const { width, height, style } = this.props;
    return { ...containerStyle, ...style, width, height };
  };
};
@zhuqingyv
Copy link
Author

主要看这行:this.renderListRef[i].current.measure // undefined

@sunnylqm
Copy link

sunnylqm commented Nov 6, 2022

image

@sunnylqm
Copy link

sunnylqm commented Nov 6, 2022

我不会用ref去测量,用起来不可靠,还是每个都去onLayout最可靠

也没看懂你这个组件是要干什么,你可以参考我用reanimated做滚动组件,我猜你大概也是要写类似的东西?
https://github.com/OneKeyHQ/app-monorepo/blob/onekey/packages/components/src/ScrollableButtonGroup/ScrollableButtonGroup.tsx

演示效果
OneKeyHQ/app-monorepo#1920

@zhuqingyv
Copy link
Author

事情大概是这样的,为了实现图文混排,并且需要换行,最常见的场景就是商品前加一个 「特惠」的标志或者双十一的标签,这可能是一个View组件或者是Image,后面跟着Text文本,然后设定超出显示 ...。我想做的就是把text每一个字符拆成独立的text,父元素flex-wrap: warp换行,最后利用onLayout计算超出的文字,然后将超出之前的最后三个字符转换为...

@xlieee
Copy link

xlieee commented Nov 14, 2022

collapsable={false}

@github-actions
Copy link

👋 Hey there, it looks like there has been no activity on this issue in the last 90 days. Has the issue been fixed, or does it still require the community attention? This issue will be closed in the next 7 days if no further activity occurs. Thank you for your contributions.

@github-actions github-actions bot added the Stale label Feb 13, 2023
@github-actions
Copy link

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants