NativeScript React - сегментированная панель и входы

React - это простой в использовании фреймворк для создания интерфейсных приложений.

NativeScript - это фреймворк для мобильных приложений, который позволяет нам создавать собственные мобильные приложения с популярными интерфейсными фреймворками.

В этой статье мы рассмотрим, как создать приложение с помощью NativeScript React.

SegmentedBar

Компонент segmentBar позволяет нам добавить панель пользовательского интерфейса, которая отображает набор кнопок для дискретного выбора.

Мы можем отображать на кнопках текст или изображения.

Например, мы можем использовать его, написав:

import * as React from "react";
export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <flexboxLayout justifyContent='center' >
          <segmentedBar>
            <segmentedBarItem title="First" />
            <segmentedBarItem title="Second" />
            <segmentedBarItem title="Third" />
          </segmentedBar>
        </flexboxLayout>
      </page>
    </frame>
  );
}

Мы добавляем segmentedBar в наше приложение.

Затем мы добавляем segmentedBarItem в нашу панель, чтобы показать некоторые элементы.

Мы также можем получить и установить индекс выбранного элемента с помощью:

import * as React from "react";
export default function Greeting({ }) {
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <flexboxLayout justifyContent='center' >
          <segmentedBar
            selectedIndex={0}
            onSelectedIndexChange={({ value }) => {
              console.log(value)
            }}
          >
            <segmentedBarItem title="First" />
            <segmentedBarItem title="Second" />
            <segmentedBarItem title="Third" />
          </segmentedBar>
        </flexboxLayout>
      </page>
    </frame>
  );
}

selectedIndex имеет индекс элемента, который мы хотим выбрать по умолчанию.

И onSelectedIndexChange имеет функцию, которая получает значение индекса последнего выбранного элемента.

value имеет индекс.

Слайдер

slider - это компонент пользовательского интерфейса, который дает нам ползунок для выбора значений в указанном числовом диапазоне.

Например, мы можем написать:

import * as React from "react";
export default function Greeting({ }) {
  const [val, setVal] = React.useState(0)
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <flexboxLayout justifyContent='center' >
          <slider value={val} onValueChange={({ value }) => setVal(value)} />
        </flexboxLayout>
      </page>
    </frame>
  );
}

чтобы добавить компонент slider в наше приложение.

Мы устанавливаем value в состояние val.

И мы получаем значение и устанавливаем значение val в обратном вызове onValueChange.

Выключатель

switch позволяет нам переключаться между 2 состояниями.

Например, мы можем написать:

import * as React from "react";
export default function Greeting({ }) {
  const [val, setVal] = React.useState(true)
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <stackLayout horizontalAlignment='center'>
          <switch
            checked={val}
            onCheckedChange={({ value }) => setVal(value)}
          />
          <label text={val.toString()} style={{ textAlignment: 'center' }} />
        </stackLayout>
      </page>
    </frame>
  );
}

Мы добавляем компонент switch с опорой checked, чтобы установить проверенное значение.

onCheckChange имеет функцию для получения проверенного значения, и мы устанавливаем это как значение состояния val.

Текстовое поле

Компонент textField - это компонент ввода, позволяющий пользователям вводить строку текста.

Например, мы можем написать:

import * as React from "react";
export default function Greeting({ }) {
  const [textFieldValue, setTextFieldValue] = React.useState()
  return (
    <frame>
      <page>
        <actionBar title="My App">
        </actionBar>
        <stackLayout horizontalAlignment='center'>
          <textField
            text={textFieldValue}
            hint="Enter text..."
            onTextChange={({ value }) => setTextFieldValue(value)}
          />
          <label text={textFieldValue} style={{ textAlignment: 'center' }} />
        </stackLayout>
      </page>
    </frame>
  );
}

Мы добавляем textField и слушаем событие onTextChange, чтобы получить последнее введенное значение.

text содержит введенный текст.

hint - заполнитель для текстового поля.

Заключение

Мы можем добавить сегментированную панель, текстовый ввод, слайдер и переключиться в наше мобильное приложение с помощью React NativeScript.