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.

Sign up for GitHub

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

fix(hippy-react-web): fixed image newProps src unRendered problem #472

Merged
merged 6 commits into from
Dec 31, 2020
Merged

fix(hippy-react-web): fixed image newProps src unRendered problem #472

Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
78a77f4
fix(hippy-react-web): fixed image newProps src unRendered problem
wanghaooo Dec 30, 2020
82d82ff
fix(hippy-react-web): fixed eslint problem
wanghaooo Dec 30, 2020
dfa5eab
fix(hippy-react-web): use getDerivedStateFromProps replace componentW…
wanghaooo Dec 30, 2020
2f60728
fix(hippy-react-web): life cycle replace
wanghaooo Dec 30, 2020
cb1735b
Merge branch 'fix/hippy-react-web-image' of https://github.com/wangha…
wanghaooo Dec 30, 2020
336f636
chore(hippy-react-web): optimize the code
wanghaooo Dec 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 29 additions & 2 deletions packages/hippy-react-web/src/components/image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,8 @@ export class Image extends React.Component {
super(props);
this.state = {
isLoadSuccess: false,
imageUrl: props.source ? props.source.uri : '',
prevImageUrl: props.source ? props.source.uri : '',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

props.source ? props.source.uri : '' 重复了写了两次，可以精简圈复杂度

};
this.onLoad = this.onLoad.bind(this);
this.onError = this.onError.bind(this);
Expand All @@ -113,7 +115,30 @@ export class Image extends React.Component {
if (onLoadStart) {
onLoadStart();
}
ImageLoader.load(source.uri, this.onLoad, this.onError);
if (source) {
ImageLoader.load(source.uri, this.onLoad, this.onError);
}
}

static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.source && nextProps.source.uri !== prevState.imageUrl) {
return {
imageUrl: nextProps.source.uri,
prevImageUrl: prevState.imageUrl,
};
}
return null;
}

componentDidUpdate() {
const { imageUrl, prevImageUrl } = this.state;
if (imageUrl !== prevImageUrl) {
ImageLoader.load(imageUrl, this.onLoad, this.onError);
// eslint-disable-next-line react/no-did-update-set-state
this.setState({
prevImageUrl: imageUrl,
});
}
}

onLoad(e) {
Expand Down Expand Up @@ -152,7 +177,7 @@ export class Image extends React.Component {
let { style } = this.props;
const { isLoadSuccess } = this.state;
const {
source, sources, resizeMode, children, defaultSource,
source, sources, resizeMode, children, defaultSource = '',
} = this.props;
if (style) {
style = formatWebStyle(style);
Expand All @@ -178,6 +203,8 @@ export class Image extends React.Component {
delete newProps.onLoad;
delete newProps.onLayout;
delete newProps.onLoadEnd;
delete newProps.defaultSource;

return (
<View {...newProps}>
<View
Expand Down