From 3b5c2617c50ba3851757ce5f669c5199edf7e20b Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Wed, 25 Mar 2015 11:52:29 -0700 Subject: [PATCH] Move around the docs a bit --- ...cal vs Logical Pixels.md => PixelRatio.md} | 30 ------------------- docs/Tutorial.md | 4 +-- docs/Videos.md | 4 +-- 3 files changed, 4 insertions(+), 34 deletions(-) rename docs/{Physical vs Logical Pixels.md => PixelRatio.md} (58%) diff --git a/docs/Physical vs Logical Pixels.md b/docs/PixelRatio.md similarity index 58% rename from docs/Physical vs Logical Pixels.md rename to docs/PixelRatio.md index 0aac1e01c..4fc872922 100644 --- a/docs/Physical vs Logical Pixels.md +++ b/docs/PixelRatio.md @@ -1,13 +1,3 @@ ---- -id: pixels -title: Physical vs Logical Pixels -layout: docs -category: Guides -permalink: docs/pixels.html -next: style ---- - - ## Pixel Grid Snapping In iOS, you can specify positions and dimensions for elements with arbitrary precision, for example 29.674825. But, ultimately the physical display only have a fixed number of pixels, for example 640×960 for iphone 4 or 750×1334 for iphone 6. iOS tries to be as faithful as possible to the user value by spreading one original pixel into multiple ones to trick the eye. The downside of this technique is that it makes the resulting element look blurry. @@ -17,23 +7,3 @@ In practice, we found out that developers do not want this feature and they have We have to be careful when to do this rounding. You never want to work with rounded and unrounded values at the same time as you're going to accumulate rounding errors. Having even one rounding error is deadly because a one pixel border may vanish or be twice as big. In React Native, everything in JS and within the layout engine work with arbitrary precision numbers. It's only when we set the position and dimensions of the native element on the main thread that we round. Also, rounding is done relative to the root rather than the parent, again to avoid accumulating rounding errors. - -## Displaying a line that's as thin as the device permits - -A width of 1 is actually 2 physical pixels thick on an iPhone 4 and 3 physical pixels thick on an iphone 6+. If you want to display a line that's as thin as possible, you can use a width of `1 / PixelRatio.get()`. It's a technique that works on all the devices independent of their pixel density. - -```javascript -style={{ borderWidth: 1 / PixelRatio.get() }} -``` - -## Fetching a correctly sized image - -You should get a higher resolution image if you are on a high pixel density device. A good rule of thumb is to multiply the size of the image you display by the pixel ratio. - -```javascript -var image = getImage({ - width: 200 * PixelRatio.get(), - height: 100 * PixelRatio.get(), -}); - -``` diff --git a/docs/Tutorial.md b/docs/Tutorial.md index ed9ea2188..97ac4a3a9 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -2,7 +2,7 @@ id: tutorial title: Tutorial layout: docs -category: Tutorial +category: Quick Start permalink: docs/tutorial.html next: videos --- @@ -147,7 +147,7 @@ var styles = StyleSheet.create({ AppRegistry.registerComponent('SampleApp', () => SampleApp); ``` -After changing the entire contents of this file to the snippet above you should be able to simply cmd+R in the simulator to see the change. It should render “Loading movies..." until it gets the data back from Rotten Tomatoes at which point it should render “Movies loaded”. +After changing the entire contents of this file to the snippet above you should be able to simply cmd+R in the simulator to see the change. It should render “Loading movies..." until it gets the data back from Rotten Tomatoes at which point it should render “Movies loaded”. ## ListView diff --git a/docs/Videos.md b/docs/Videos.md index b236b7daf..7fa3dbc2b 100644 --- a/docs/Videos.md +++ b/docs/Videos.md @@ -2,9 +2,9 @@ id: videos title: Videos layout: docs -category: Community Resources +category: Quick Start permalink: docs/videos.html -next: pixels +next: style ---