跳到主要内容

Basic components

Text​

We've already seen this React component for displaying text. Text supports nesting, styling and touch processing.

Image​

React Component for displaying various types of images, including network images, static resources, temporary local images, and images from local disk.

The height and width of a component determine its size on the screen. There are three ways to work with sizes: fixed sizes, flexible sizes, percentage sizes. More details about them here.

View​

The most fundamental component for building a UI is View - a container that supports layout with flexbox styling, some touch handling and accessibility controls.

View is intended to be nested within other views and can have 0 to many children of any type.

This example creates a view that wraps two boxes with color and a text component on a row with padding.

View are intended to be used with StyleSheet, although inline styles are also supported.

StyleSheet​

With React Native, you style your app with JavaScript. All core components accept a property named style.

<Text style={{ color: 'gold' }}>Hello world!</Text>

The style names and values usually correspond to how CSS works on the web, except that the names are written in camel-case, such as backgroundColor rather than background-color.

The style prop can be a regular JavaScript object. You can also pass in an array of styles - the last style in the array takes precedence, so you can use it to inherit styles.

As the component gets more complex, it is often easier to use StyleSheet.create to define multiple styles in one place.

ActivityIndicator​

Displays a circular loading indicator.

Component composition​

Components can refer to other components in their output (rendered result). Like a nesting doll, the components are nested within each other. For example, we can create an App component that renders the HelloWorld component many times:

Empty tags <> ... </> are shorthand for declaration of fragments. Fragments allow you to return multiple items from a component. It is a kind of wrapper for a group of components. Fragments allow you to form a list of child elements without creating unnecessary nodes in the DOM. Returning a list of children from a component is a common practice.

Questions​

To display the text, we use the component:

  1. text
  2. Text
  3. h1

To display different types of images, we use the component:

  1. Image
  2. img
  3. Imag

How many ways to work with dimensions in React Native:

  1. 1
  2. 2
  3. 3

Fundamental component for creating a user interface:

1.<> 2. Text 3. View

View is not meant to be nested within other views?

  1. true
  2. false

View can have 0 to many children of any type?

  1. true
  2. false

Are View not meant to be used with StyleSheet?

  1. true
  2. false

With React Native, you style your app with JavaScript. Do all core components accept a property named style?

  1. true
  2. false

Style names and values ​​are usually written in ___?

  1. UpperCase
  2. LowerCase
  3. CamelCase

Style prop can be a regular JavaScript object and can also pass an array of styles?

  1. true
  2. false

Components can refer to other components in their output (rendered result)?

  1. true
  2. false

Empty tags <> ... </> is this shorthand for declaring a View component?

  1. true
  2. false

To see how well you learned this lesson, take the test in the mobile application of our school on this topic or in the telegram bot.

EnglishMoji!

  1. React Native - official website
  2. Learn React

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
💲

EnglishMoji!