Merged PR 786925: Add delay load for background image.
Add delay load for background image.
This commit is contained in:
Родитель
729f64d1f4
Коммит
a8bc507eef
|
@ -22,24 +22,27 @@ export class ImageBackground extends React.Component {
|
|||
});
|
||||
}
|
||||
};
|
||||
this.fetchImageSize = () => {
|
||||
const { url } = this.props;
|
||||
if (url) {
|
||||
Image.getSize(url, (width, height) => {
|
||||
if (width > 0 && height > 0) {
|
||||
this.setState({
|
||||
imgRatio: width / height,
|
||||
});
|
||||
}
|
||||
}, (error) => {
|
||||
this.onError(error);
|
||||
});
|
||||
}
|
||||
};
|
||||
this.state = {
|
||||
containerRatio: 1,
|
||||
imgRatio: 1,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
const { url } = this.props;
|
||||
if (url) {
|
||||
Image.getSize(url, (width, height) => {
|
||||
if (width > 0 && height > 0) {
|
||||
this.setState({
|
||||
imgRatio: width / height,
|
||||
});
|
||||
}
|
||||
}, (error) => {
|
||||
this.onError(error);
|
||||
});
|
||||
}
|
||||
setTimeout(this.fetchImageSize, 500);
|
||||
}
|
||||
render() {
|
||||
return (React.createElement(View, { style: [
|
||||
|
|
|
@ -22,24 +22,27 @@ export class ImageBackground extends React.Component {
|
|||
});
|
||||
}
|
||||
};
|
||||
this.fetchImageSize = () => {
|
||||
const { url } = this.props;
|
||||
if (url) {
|
||||
Image.getSize(url, (width, height) => {
|
||||
if (width > 0 && height > 0) {
|
||||
this.setState({
|
||||
imgRatio: width / height,
|
||||
});
|
||||
}
|
||||
}, (error) => {
|
||||
this.onError(error);
|
||||
});
|
||||
}
|
||||
};
|
||||
this.state = {
|
||||
containerRatio: 1,
|
||||
imgRatio: 1,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
const { url } = this.props;
|
||||
if (url) {
|
||||
Image.getSize(url, (width, height) => {
|
||||
if (width > 0 && height > 0) {
|
||||
this.setState({
|
||||
imgRatio: width / height,
|
||||
});
|
||||
}
|
||||
}, (error) => {
|
||||
this.onError(error);
|
||||
});
|
||||
}
|
||||
setTimeout(this.fetchImageSize, 500);
|
||||
}
|
||||
render() {
|
||||
return (React.createElement(View, { style: [
|
||||
|
|
|
@ -43,23 +43,7 @@ export class ImageBackground extends React.Component<IProps, IState> {
|
|||
}
|
||||
|
||||
public componentDidMount() {
|
||||
const { url } = this.props;
|
||||
|
||||
if (url) {
|
||||
Image.getSize(
|
||||
url,
|
||||
(width, height) => {
|
||||
if (width > 0 && height > 0) {
|
||||
this.setState({
|
||||
imgRatio: width / height,
|
||||
});
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
this.onError(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
setTimeout(this.fetchImageSize, 500);
|
||||
}
|
||||
|
||||
public render() {
|
||||
|
@ -109,6 +93,37 @@ export class ImageBackground extends React.Component<IProps, IState> {
|
|||
}
|
||||
}
|
||||
|
||||
private onLayout = (event: LayoutChangeEvent) => {
|
||||
let width = event.nativeEvent.layout.width;
|
||||
let height = event.nativeEvent.layout.height;
|
||||
|
||||
if (width > 0 && height > 0) {
|
||||
this.setState({
|
||||
containerRatio: width / height,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private fetchImageSize = () => {
|
||||
const { url } = this.props;
|
||||
|
||||
if (url) {
|
||||
Image.getSize(
|
||||
url,
|
||||
(width, height) => {
|
||||
if (width > 0 && height > 0) {
|
||||
this.setState({
|
||||
imgRatio: width / height,
|
||||
});
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
this.onError(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
private get resizeMethod() {
|
||||
switch (this.props.resizeMode) {
|
||||
case 'repeat':
|
||||
|
@ -122,15 +137,4 @@ export class ImageBackground extends React.Component<IProps, IState> {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
private onLayout = (event: LayoutChangeEvent) => {
|
||||
let width = event.nativeEvent.layout.width;
|
||||
let height = event.nativeEvent.layout.height;
|
||||
|
||||
if (width > 0 && height > 0) {
|
||||
this.setState({
|
||||
containerRatio: width / height,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -22,24 +22,27 @@ export class ImageBackground extends React.Component {
|
|||
});
|
||||
}
|
||||
};
|
||||
this.fetchImageSize = () => {
|
||||
const { url } = this.props;
|
||||
if (url) {
|
||||
Image.getSize(url, (width, height) => {
|
||||
if (width > 0 && height > 0) {
|
||||
this.setState({
|
||||
imgRatio: width / height,
|
||||
});
|
||||
}
|
||||
}, (error) => {
|
||||
this.onError(error);
|
||||
});
|
||||
}
|
||||
};
|
||||
this.state = {
|
||||
containerRatio: 1,
|
||||
imgRatio: 1,
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
const { url } = this.props;
|
||||
if (url) {
|
||||
Image.getSize(url, (width, height) => {
|
||||
if (width > 0 && height > 0) {
|
||||
this.setState({
|
||||
imgRatio: width / height,
|
||||
});
|
||||
}
|
||||
}, (error) => {
|
||||
this.onError(error);
|
||||
});
|
||||
}
|
||||
setTimeout(this.fetchImageSize, 500);
|
||||
}
|
||||
render() {
|
||||
return (React.createElement(View, { style: [
|
||||
|
|
Загрузка…
Ссылка в новой задаче