mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-23 20:01:01 +08:00
Implement Image.defaultSource property on Android
Summary: This pull request implements Image.defaultSource property on Android, using Fresco (http://frescolib.org/docs/placeholder-failure-retry.html), which will show placeholder image (local asset) while loading remote image. Implementation code is almost same with loadingIndicatorSource, but without rotation. This requires release or production to bundle local images in an APK file. This provides feature parity with iOS. Set Image.defaultSource on Android, and will show it while loading Image.source. ```JSX <Image defaultSource={require('<path to image>')} source={{uri: '<url to remote image>'}} style={{ height: 300, width: 300 }} /> ``` [ANDROID] [FEATURE] [IMAGE] - Image.defaultSource will show local image as placeholder while loading remote Image.source. Closes https://github.com/facebook/react-native/pull/18588 Differential Revision: D7540489 Pulled By: himabindugadupudi fbshipit-source-id: 908ceb659b3416e517bba64c76a31879d965ec09
This commit is contained in:
committed by
Facebook Github Bot
parent
bf7601fde1
commit
b0fa3228a7
@@ -74,6 +74,10 @@ var Image = createReactClass({
|
||||
* See https://facebook.github.io/react-native/docs/image.html#blurradius
|
||||
*/
|
||||
blurRadius: PropTypes.number,
|
||||
/**
|
||||
* See https://facebook.github.io/react-native/docs/image.html#defaultsource
|
||||
*/
|
||||
defaultSource: PropTypes.number,
|
||||
/**
|
||||
* See https://facebook.github.io/react-native/docs/image.html#loadingindicatorsource
|
||||
*/
|
||||
@@ -197,6 +201,7 @@ var Image = createReactClass({
|
||||
|
||||
render: function() {
|
||||
const source = resolveAssetSource(this.props.source);
|
||||
const defaultSource = resolveAssetSource(this.props.defaultSource);
|
||||
const loadingIndicatorSource = resolveAssetSource(
|
||||
this.props.loadingIndicatorSource,
|
||||
);
|
||||
@@ -220,6 +225,12 @@ var Image = createReactClass({
|
||||
);
|
||||
}
|
||||
|
||||
if (this.props.defaultSource && this.props.loadingIndicatorSource) {
|
||||
throw new Error(
|
||||
'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
|
||||
);
|
||||
}
|
||||
|
||||
if (source && (source.uri || Array.isArray(source))) {
|
||||
let style;
|
||||
let sources;
|
||||
@@ -243,6 +254,9 @@ var Image = createReactClass({
|
||||
),
|
||||
src: sources,
|
||||
headers: source.headers,
|
||||
defaultSrc: defaultSource
|
||||
? defaultSource.uri
|
||||
: null,
|
||||
loadingIndicatorSrc: loadingIndicatorSource
|
||||
? loadingIndicatorSource.uri
|
||||
: null,
|
||||
@@ -268,6 +282,7 @@ var cfg = {
|
||||
nativeOnly: {
|
||||
src: true,
|
||||
headers: true,
|
||||
defaultSrc: true,
|
||||
loadingIndicatorSrc: true,
|
||||
shouldNotifyLoadEvents: true,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user