Условный рендеринг и сопоставление в React Native: руководство по рендерингу динамических компонентов

В React Native вы можете использовать условный рендеринг и метод mapдля динамического рендеринга компонентов на основе определенных условий и для перебора массивов или списков данных. Вот объяснение этих методов и несколько примеров:

  1. Условная отрисовка.
    Условная отрисовка позволяет отображать или скрывать компоненты в зависимости от определенных условий. Вы можете использовать условные операторы JavaScript, такие как if, else ifи else, в своем коде JSX. Вот пример:
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
  const isLoggedIn = true;
  return (
    <View>
      {isLoggedIn ? (
        <Text>Welcome, user!</Text>
      ) : (
        <Text>Please log in to continue.</Text>
      )}
    </View>
  );
};
export default App;

В приведенном выше примере компонент будет отображаться условно на основе значения переменной isLoggedIn.

  1. Метод Map:
    Метод mapиспользуется для перебора массива или списка данных и создания нового массива с измененными или преобразованными элементами. В React Native вы можете использовать метод mapдля динамического отображения списка компонентов на основе ваших данных. Вот пример:
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
  const fruits = ['Apple', 'Banana', 'Orange'];
  return (
    <View>
      {fruits.map((fruit, index) => (
        <Text key={index}>{fruit}</Text>
      ))}
    </View>
  );
};
export default App;

В приведенном выше примере массив fruitsповторяется с использованием метода map, а для каждого фрукта отображается компонент . в массиве.