status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add `extends Component` to Dimensions and Layout Basics Examples 

Summary:
It works without out the `extends`, but I do not really understand why,
unless there is some magic implicit `extends` if you don't put it and
you call `registerComponent`. But, I figure we should be explicit unless
there is a good reason not to be.
Closes https://github.com/facebook/react-native/pull/8377

Differential Revision: D3478950

Pulled By: JoelMarcey

fbshipit-source-id: 05ea4367c3c8c34aea6c092639ee51d8761bca3f
This commit is contained in:
Joel Marcey 2016-06-23 15:51:45 -07:00 committed by Facebook Github Bot 5
parent eadbb919c3
commit 34adde9e96
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/Basics-Dimensions.md
View File

@ -14,10 +14,10 @@ A component's dimensions determine its size on the screen.
The simplest way to set the dimensions of a component is by adding a fixed `width` and `height` to style. All dimensions in React Native are unitless, and represent density-independent pixels.
```ReactNativeWebPlayer
import React from 'react';
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
class FixedDimensionsBasics extends Component {
render() {
return (
<View>
@ -29,7 +29,7 @@ class AwesomeProject {
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
```
Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.
@ -41,10 +41,10 @@ Use `flex` in a component's style to have the component expand and shrink dynami
> A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed `width` and `height` or `flex`, the parent will have dimensions of 0 and the `flex` children will not be visible.
```ReactNativeWebPlayer
import React from 'react';
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
class FlexDimensionsBasics extends Component {
render() {
return (
// Try removing the `flex: 1` on the parent View.
@ -59,5 +59,5 @@ class AwesomeProject {
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
```

18
docs/Basics-Layout.md
View File

@ -18,10 +18,10 @@ You will normally use a combination of `flexDirection`, `alignItems`, and `justi
Adding `flexDirection` to a component's `style` determines the **primary axis** of its layout. Should the children be organized horizontally (`row`) or vertically (`column`)? The default is `column`.
```ReactNativeWebPlayer
import React from 'react';
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
class FlexDirectionBasics extends Component {
render() {
return (
// Try setting `flexDirection` to `column`.
@ -34,7 +34,7 @@ class AwesomeProject {
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
```
#### Justify Content
@ -42,10 +42,10 @@ AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Adding `justifyContent` to a component's style determines the **distribution** of children along the **primary axis**. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are `flex-start`, `center`, `flex-end`, `space-around`, and `space-between`.
```ReactNativeWebPlayer
import React from 'react';
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
class JustifyContentBasics extends Component {
render() {
return (
// Try setting `justifyContent` to `center`.
@ -63,7 +63,7 @@ class AwesomeProject {
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
```
#### Align Items
@ -73,10 +73,10 @@ Adding `alignItems` to a component's style determines the **alignment** of child
> For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
```ReactNativeWebPlayer
import React from 'react';
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
class AlignItemsBasics {
render() {
return (
// Try setting `alignItems` to 'flex-start'
@ -96,7 +96,7 @@ class AwesomeProject {
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
```
#### API Reference