fix: spelling and grammar on some react native articles (#23575)
Signed-off-by: Jonathan Grah <theflametrooper@gmail.com>
This commit is contained in:
Jonathan Grah
committed by
Huyen Nguyen
Huyen Nguyen
parent
f0798189c9
commit
181fea9e8e
@@ -1,20 +1,21 @@
|
||||
---
|
||||
title: Screen Dimensions
|
||||
---
|
||||
|
||||
## React Native - Screen Dimensions
|
||||
|
||||
React Native uses Dots Per Inch (DPI) to measure the sizing of the User Interface (UI) and anything displayed on the UI. This type of measurement allows an application to look uniform across various screen sizes and pixel densities.
|
||||
React Native uses Dots Per Inch (DPI) to measure the sizing and anything displayed on the User Interface (UI). This type of measurement allows an application to look uniform across various screen sizes and pixel densities.
|
||||
|
||||
For standard use cases, applications can be developed without having to know the specifics of the user's device (e.g. pixel density) since the UI elements will scale automatically. When it is required, there are APIs available such as `PixelRatio` for finding out the pixel density of the user's device.
|
||||
|
||||
React Native provides an API called `Dimensions` that can be used to get the width and height of the window or screen of a user's device.
|
||||
React Native provides an API called `Dimensions` that can be used to get the width and height of the window or screen of a user's device.
|
||||
|
||||
```js
|
||||
import { Dimensions } from 'react-native';
|
||||
```
|
||||
|
||||
These are are the methods that this API currently offers:
|
||||
|
||||
|
||||
```
|
||||
set
|
||||
get
|
||||
@@ -22,25 +23,21 @@ addEventListener
|
||||
removeEventListener
|
||||
```
|
||||
|
||||
For the purposes of this guide, we'll focus on the `get` method, but feel free to check out the React Native official documentation for details on the other methods.
|
||||
|
||||
https://facebook.github.io/react-native/docs/dimensions#docsNav
|
||||
For the purposes of this guide, we'll focus on the `get` method, but feel free to check out the [React Native documentation](https://facebook.github.io/react-native/docs/dimensions#docsNav) for details on the other methods.
|
||||
|
||||
The width and height of the window object can be easily retrieved, like so:
|
||||
|
||||
```js
|
||||
const width = Dimensions.get("window").width
|
||||
const height = Dimensions.get("window").height
|
||||
const width = Dimensions.get('window').width;
|
||||
const height = Dimensions.get('window').height;
|
||||
|
||||
// if you're feeling fancy, you could also use object destructuring to get those values out of the object that `Dimensions.get("window")` returns
|
||||
const { width, height } = Dimensions.get("window")
|
||||
const { width, height } = Dimensions.get('window');
|
||||
```
|
||||
|
||||
Pretty simple, huh? Let's take a look at an example.
|
||||
Pretty simple, huh? Let's take a look at an example:
|
||||
|
||||
Let's say you want to cover the whole screen with a background image. We'll use the `ImageBackground` component that React Native provides. You can read more about it in the link below.
|
||||
|
||||
https://facebook.github.io/react-native/docs/images#background-image-via-nesting.
|
||||
Let's say you want to cover the whole screen with a background image. We'll use the `ImageBackground` component that React Native provides. You can read more about here: https://facebook.github.io/react-native/docs/images#background-image-via-nesting.
|
||||
|
||||
We need to set the width and height for this component to work. One way to do that is by using the width and height we got with the `Dimensions` API.
|
||||
|
||||
@@ -52,8 +49,7 @@ const { width, height } = Dimensions.get("window")
|
||||
|
||||
export default HomePage = () => {
|
||||
return(
|
||||
<ImageBackground source={...} style={{ width, height }}>
|
||||
</ImageBackground>
|
||||
<ImageBackground source={...} style={{ width, height }} />
|
||||
)
|
||||
}
|
||||
```
|
||||
@@ -65,13 +61,10 @@ For example, if you wanted a screen to look a certain way on an iPad vs a phone
|
||||
```js
|
||||
const { width, height } = Dimensions.get('window');
|
||||
const TABLET_RATIO = 1.6;
|
||||
const ASPECT_RATIO = height/width;
|
||||
|
||||
// later on in the view this can be applied with a ternary
|
||||
<FancyView
|
||||
style={(ASPECT_RATIO > TABLET_RATIO) ? styles.phone : styles.ipad }
|
||||
></FancyView>
|
||||
|
||||
const ASPECT_RATIO = height / width;
|
||||
|
||||
// later on in the view this can be applied with a ternary
|
||||
<FancyView style={ASPECT_RATIO > TABLET_RATIO ? styles.phone : styles.ipad} />;
|
||||
```
|
||||
|
||||
**Note: There have been some known issues in the past with the Dimensions API such as not returning the correct information when a user rotates their device. It's best to make sure you test this on actual devices before deploying an application.**
|
||||
**Note: There have been some known issues in the past with the Dimensions API, such as it not returning the correct information when a user rotates their device. It's best to make sure you test this on actual devices before deploying an application.**
|
||||
|
||||
@@ -1,29 +1,30 @@
|
||||
---
|
||||
title: Component State
|
||||
---
|
||||
|
||||
## Component State
|
||||
|
||||
In `Class` components, there is a way to store and manage state built in to React Native.
|
||||
|
||||
```javascript
|
||||
class App extends Component {
|
||||
constructor () {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
counter: 0
|
||||
counter: 0,
|
||||
};
|
||||
}
|
||||
incrementCount () {
|
||||
incrementCount() {
|
||||
this.setState({
|
||||
counter: this.state.counter + 1
|
||||
counter: this.state.counter + 1,
|
||||
});
|
||||
}
|
||||
decrementCount () {
|
||||
decrementCount() {
|
||||
this.setState({
|
||||
counter: this.state.counter - 1
|
||||
counter: this.state.counter - 1,
|
||||
});
|
||||
}
|
||||
render () {
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Text>Count: {this.state.counter}</Text>
|
||||
@@ -37,16 +38,18 @@ class App extends Component {
|
||||
|
||||
State is similar to props, but it is private and fully controlled by the component. Here, the `constructor()` method is calling the parent class' constructor with `super();` - **`Component`** is the parent class of `App` because we are using the `extends` keyword. The `constructor()` method also initializes the component's state object:
|
||||
|
||||
```
|
||||
```js
|
||||
this.state = {
|
||||
counter: 0
|
||||
counter: 0,
|
||||
};
|
||||
```
|
||||
|
||||
The state can be displayed within the component:
|
||||
|
||||
```js
|
||||
{this.state.counter}
|
||||
{
|
||||
this.state.counter;
|
||||
}
|
||||
```
|
||||
|
||||
Or updated by calling:
|
||||
@@ -55,20 +58,18 @@ Or updated by calling:
|
||||
this.setState({});
|
||||
```
|
||||
|
||||
**Note:** Aside from its initial creation in your component's `constructor()` method, you should never directly modify the component's state with `this.state = `. You must use `this.setState` as can be seen in the `incrementCount` and `decrementCount` functions above.
|
||||
**Note:** Aside from its initial creation in your component's `constructor()` method, you should never directly modify the component's state with `this.state =`. You must use `this.setState`, as shown in the `incrementCount` and `decrementCount` functions above.
|
||||
|
||||
The count is incremented and decremented by calling the functions passed to the `onPress` handlers just like they would be if you called a click handler from JavaScript on the web.
|
||||
The count is incremented and decremented by calling the functions passed to the `onPress` handlers, just like they would if you called a click handler from JavaScript on the web.
|
||||
|
||||
*ASIDE: In the first example, `<Button>` is a custom component; it's a combination of `<TouchableOpacity>` and `<Text>` from the React Native API:*
|
||||
_ASIDE: In the first example, `<Button>` is a custom component; it's a combination of `<TouchableOpacity>` and `<Text>` from the React Native API:_
|
||||
|
||||
```js
|
||||
const Button = ({ onPress, children, buttonProps, textProps }) => {
|
||||
const { buttonStyle, textStyle } = styles;
|
||||
return (
|
||||
<TouchableOpacity onPress={onPress} style={[buttonStyle, buttonProps]}>
|
||||
<Text style={[textStyle, textProps]}>
|
||||
{children}
|
||||
</Text>
|
||||
<Text style={[textStyle, textProps]}>{children}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Styling
|
||||
|
||||
## React Native - Styling
|
||||
|
||||
React Native provides an API for creating stylesheets and styling your components: [StyleSheet](https://facebook.github.io/react-native/docs/stylesheet).
|
||||
React Native provides an API for creating stylesheets and styling your components: [Documentation on Stylesheets](https://facebook.github.io/react-native/docs/stylesheet).
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react';
|
||||
@@ -35,11 +35,11 @@ While regular CSS stylesheets aren't valid, React Native's superset of CSS is ve
|
||||
|
||||
Not all CSS properties exist in StyleSheet. Since there is no true concept of hovering on mobile devices, CSS hover properties don't exist in React Native. Instead, React Native provides [Touchable components](https://facebook.github.io/react-native/docs/handling-touches#touchables) that respond to touch events.
|
||||
|
||||
Styles are also not inherited as they are in traditional CSS. In most cases, you must declare the style of each component.
|
||||
Styles are also not inherited, as they are in traditional CSS. In most cases, you must declare the style of each component.
|
||||
|
||||
### Flexbox Layouts
|
||||
|
||||
React Native uses an implementation of [flexbox](https://facebook.github.io/react-native/docs/flexbox) similar to the web standard. By default, items in the view will be set to `display: flex`.
|
||||
React Native uses an implementation of [flexbox](https://facebook.github.io/react-native/docs/flexbox), similar to the web standard. By default, items in the view will be set to `display: flex`.
|
||||
|
||||
> If you do not want to use flexbox, you can also arrange React Native components via `relative` or `absolute` positioning.
|
||||
|
||||
@@ -113,4 +113,7 @@ export default class Login extends Component {
|
||||
|
||||
### Libraries for Styling
|
||||
|
||||
There are a few popular libraries for styling React Native. Some of them provide features similar to [Bootstrap](../../bootstrap), including default forms, button styles, and page layout options. One of the most popular libraries is [styled-components](https://github.com/styled-components/styled-components). There are many others you can find on npm and GitHub to try for yourself.
|
||||
There are a few popular libraries for styling React Native. Some of them provide features similar to [Bootstrap](../../bootstrap/index.md); including default forms, button styles, and page layout options.
|
||||
|
||||
One of the most popular libraries is [styled-components](https://github.com/styled-components/styled-components). There are many others you can find on npm and GitHub to try for yourself.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user