DylanVann / react-native-fast-image

🚩 FastImage, performant React Native image component.
MIT License
8.21k stars 1.51k forks source link

Android auto size error, in hook #687

Open prozwang opened 4 years ago

prozwang commented 4 years ago
export default class SDImage extends PureComponent<Props, State> {
  static resolveAssetSource(source: ImageSourcePropType) {
    return Image.resolveAssetSource(source)
  }

  private imageW = 0
  private imageH = 0

  constructor(props: Props) {
    super(props)
    this.state = {
      width: 0,
      height: 0,
    }
  }

  updateImage = () => {
    this.setState({ width: this.imageW, height: this.imageH })
  }

  render() {
    const { width, height } = this.state
    if (this.props.shouldUseImage) {
      return <Image {...this.props} />
    }
    return (
      <FastImage
        style={{ width, height }}
        resizeMode={FastImage.resizeMode.contain}
        onLoad={(event) => {
          const { nativeEvent } = event
          const { width, height } = nativeEvent
          this.imageW = width
          this.imageH = height
          this.updateImage()
        }}
        {...this.props}
      />
    )
  }
}

in another file i return this

return (
     <View style={styles.containerView}>
      <SrcDstSelectPanelView
        originLocation={originLocation}
        onTapCallDriverButton={goSelectDest}
        onTapSelectOrigin={goSelectOrigin}
        callDriverButtonEnabled={!isMoveBegin}
        onTapLeftBarButton={showMenu}
        onTapRightBarButton={gotoCouponMall}
        shouldShowInprogressOrder={shouShowTopBar}
        onTapTopBar={topBarAction}
      />
      <View style={styles.floatingAdPanelView}>
        {showFloatingIcon()}
        <FloatingAdPanelView navigator={props.navigator} />
      </View>
      <LocateBtn style={styles.pinButton} />
      <BottomSheetBehavior peekHeight={160}>
        {shouldOpenAreaIssue && renderAreaIssueTag()}
        {showBottom!()}
        <View style={{ height: 25 + marginBottomSpaceForIphoneX() }} />
      </BottomSheetBehavior>
    </View>
  )

LocateBtn

export default class extends Component<Props> {
  static defaultProps = {
    onLocate: () => {
      ServiceProvider.get().locationService.initMapState(MapDisplayState.DEFAULT)
    },
  }

  render() {
    const { onLocate, style } = this.props
    return (
      <TouchableOpacity style={[styles.locate, style]} onPress={onLocate}>
        <Image source={require('@app/images/icon_locate.png')} />
      </TouchableOpacity>
    )
  }
}

under iOS, it works , the button size is the same as image size but under android, it doesn't work , the button size is zero , i have log the render size , at the first few times , it's correct . but when hook function cause rerender, it goes wrong . until onLoad call back, it's still correct , but in the render function, it turns to zero

fukemy commented 2 years ago

hi, did u solved this? Im facing same issue