718cd7953f
Summary: public This diff adds a `getSize()` method to `Image` to retrieve the width and height of an image prior to displaying it. This is useful when working with images from uncontrolled sources, and has been a much-requested feature. In order to retrieve the image dimensions, the image may first need to be loaded or downloaded, after which it will be cached. This means that in principle you could use this method to preload images, however it is not optimized for that purpose, and may in future be implemented in a way that does not fully load/download the image data. A fully supported way to preload images will be provided in a future diff. The API (separate success and failure callbacks) is far from ideal, but until we agree on a unified standard, this was the most conventional way I could think of to implement it. If it returned a promise or something similar, it would be unique among all such APIS in the framework. Please note that this has been a long time coming, in part due to much bikeshedding about what the API should look like, so while it's not unlikely that the API may change in future, I think having *some* way to do this is better than waiting until we can define the "perfect" way. Reviewed By: vjeux Differential Revision: D2797365 fb-gh-sync-id: 11eb1b8547773b1f8be0bc55ddf6dfedebf7fc0a |
||
|---|---|---|
| .. | ||
| AnimatedGratuitousApp | ||
| Navigator | ||
| Thumbnails | ||
| UIExplorer | ||
| UIExplorer.xcodeproj | ||
| UIExplorerIntegrationTests | ||
| UIExplorerUnitTests | ||
| android/app | ||
| AccessibilityAndroidExample.android.js | ||
| AccessibilityIOSExample.js | ||
| ActionSheetIOSExample.js | ||
| ActivityIndicatorIOSExample.js | ||
| AdSupportIOSExample.js | ||
| AlertExample.js | ||
| AlertIOSExample.js | ||
| AnimatedExample.js | ||
| AppStateIOSExample.js | ||
| AssetScaledImageExample.js | ||
| AsyncStorageExample.js | ||
| BorderExample.js | ||
| CameraRollExample.ios.js | ||
| CameraRollView.ios.js | ||
| ClipboardExample.js | ||
| DatePickerIOSExample.js | ||
| ExampleTypes.js | ||
| GeolocationExample.js | ||
| ImageCapInsetsExample.js | ||
| ImageEditingExample.js | ||
| ImageExample.js | ||
| IntentAndroidExample.android.js | ||
| LayoutEventsExample.js | ||
| LayoutExample.js | ||
| ListViewExample.js | ||
| ListViewGridLayoutExample.js | ||
| ListViewPagingExample.js | ||
| MapViewExample.js | ||
| ModalExample.js | ||
| NavigatorIOSColorsExample.js | ||
| NavigatorIOSExample.js | ||
| NetInfoExample.js | ||
| PanResponderExample.js | ||
| PickerIOSExample.js | ||
| PointerEventsExample.js | ||
| ProgressBarAndroidExample.android.js | ||
| ProgressViewIOSExample.js | ||
| PullToRefreshViewAndroidExample.android.js | ||
| PushNotificationIOSExample.js | ||
| RCTRootViewIOSExample.js | ||
| README.md | ||
| ScrollViewExample.js | ||
| ScrollViewSimpleExample.js | ||
| SegmentedControlIOSExample.js | ||
| SetPropertiesExampleApp.js | ||
| SliderIOSExample.js | ||
| StatusBarIOSExample.js | ||
| SwitchAndroidExample.android.js | ||
| SwitchIOSExample.js | ||
| TabBarIOSExample.js | ||
| TextExample.android.js | ||
| TextExample.ios.js | ||
| TextInputExample.android.js | ||
| TextInputExample.ios.js | ||
| TimerExample.js | ||
| ToastAndroidExample.android.js | ||
| ToolbarAndroidExample.android.js | ||
| TouchableExample.js | ||
| TransformExample.js | ||
| TransparentHitTestExample.js | ||
| UIExplorerApp.android.js | ||
| UIExplorerApp.ios.js | ||
| UIExplorerBlock.js | ||
| UIExplorerButton.js | ||
| UIExplorerList.android.js | ||
| UIExplorerList.ios.js | ||
| UIExplorerListBase.js | ||
| UIExplorerPage.js | ||
| UIExplorerTitle.js | ||
| VibrationIOSExample.js | ||
| ViewExample.js | ||
| ViewPagerAndroidExample.android.js | ||
| WebViewExample.js | ||
| XHRExample.android.js | ||
| XHRExample.ios.js | ||
| XHRExampleCookies.js | ||
| XHRExampleHeaders.js | ||
| bunny.png | ||
| createExamplePage.js | ||
| flux@3x.png | ||
| hawk.png | ||
| slider-left.png | ||
| slider-left@2x.png | ||
| slider-right.png | ||
| slider-right@2x.png | ||
| slider.png | ||
| slider@2x.png | ||
| uie_thumb_big.png | ||
README.md
UIExplorer
The UIExplorer is a sample app that showcases React Native views and modules.
Running this app
Before running the app, make sure you ran:
git clone https://github.com/facebook/react-native.git
cd react-native
npm install
Running on iOS
Mac OS and Xcode are required.
- Open
Examples/UIExplorer/UIExplorer.xcodeprojin Xcode - Hit the Run button
See Running on device if you want to use a physical device.
Running on Android
You'll need to have all the prerequisites (SDK, NDK) for Building React Native installed.
Start an Android emulator (Genymotion is recommended).
cd react-native
./gradlew :Examples:UIExplorer:android:app:installDebug
./packager/packager.sh
Note: Building for the first time can take a while.
Open the UIExplorer app in your emulator.
See Running on Device in case you want to use a physical device.
Built from source
Building the app on both iOS and Android means building the React Native framework from source. This way you're running the latest native and JS code the way you see it in your clone of the github repo.
This is different from apps created using react-native init which have a dependency on a specific version of React Native JS and native code, declared in a package.json file (and build.gradle for Android apps).