@akalli/компоненты — это фреймворк для React Native, интеллектуальных компонентов и проверки форм. Вы можете считать его детищем идей chakra-ui/native-base со стилизованными компонентами.

Хватит разговоров, просто пример может прояснить это, лол :).

import { Text, View } from "@akalli/components";

export const Component = memo((props: IPropsHeader) => {
  return (
    <View _style={styles.view}>
      <Text _style={styles.text}>My text here</Text>
      <Text _style="color: blue;">Inline styles support too!</Text>
    </View>
  );
});

const styles = {
  view: `
    height: 100px;
    background-color: red;
    width: 100%;
  `,
  text: `
    color: white;
    font-size: 24px;
  `,
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

Вы можете поставить свой стиль inline или позвонить из const или же object. Под капотом все преобразуется в стилизованные компоненты.


Монтаж

npm install @akalli/components styled-components react-native-svg yup


Применение

special props связанная с этой компонентной библиотекой, идентифицируется с _. Каждый раз, когда вы видите prop with _ это означает, что это одна из наших библиотек, все остальное точно такое же, как и для реакции. Конечно, благодаря машинописному тексту вы можете просто нажать _ в компоненте, чтобы увидеть, какие резервы использовать.


Составные части


Специальные виды

  • Вид — То же, что и View в RN.
  • HSection и VSection — являются видами, но с обозначенной ориентацией, а также более семантическими.
  • ScrollView — То же, что и ScrollView в RN.
  • Центр, HCenter и VCenter — Представления с различным стилем централизации.
  • Показывать — Представление с логикой условия, полезное для более очевидного и семантического условного рендеринга, оно включает _fallback поддержите ложный случай.


Списки

  • Плоский список — То же, что и FlatList.
  • РазделСписок — То же, что и SectionList.


Вход

  • Ввод текста — То же, что TextInput в RN.
  • Вход — Вход, который работает с хуком проверки useMyForm (который имеет интеграцию с ага).


Другие

  • Заголовок — Более простой способ реализации шапки со значком.


Тематика и варианты

const initialTheme = {
  colors: {},
  fontSizes: {},
  variants: {
    viewBgRed:`
      background-color: red;
    `
  }
}

<MyThemeProvider theme={initialTheme}>
  <View _variant='viewBgRed'>
   <Text>Hey coders!</Text>
  </View>
</MyThemeProvider>
Войти в полноэкранный режим

Выйти из полноэкранного режима


Крючки

  • использоватьMyStyle — Этот хук используется для динамических стилей. Это позволяет вам динамически стилизовать, не вызывая повторного рендеринга.
// This will only be called again when lang changes.
 const changeLangButtonStyle = useMyStyle(styles.changeLangButton(lang), [
    lang,
  ]);

Войти в полноэкранный режим

Выйти из полноэкранного режима

  • использоватьMyStyledComponent — Благодаря этому вы можете создавать свои собственные компоненты, используя нашу философию.

  • использоватьMyTheme — Это позволяет вам получить доступ к нашей теме. Чтобы использовать его, необходимо обернуть ваше приложение нашим MyThemeProvider и кормить theme prop.

  • использоватьMyForm — Этот хук используется для проверки формы и имеет интеграцию с yup.

const schema = yup.object().shape({
  name: yup
    .string()
    .min(5, "put at least 5 letters")
    .required("Name is required"),
  email: yup.string().email("Not valid email").required("Email is required"),
});

 const { register, handleSubmitForm } = useMyForm({ schema });

  <Input
          _variant="inputForm"
          _register={register}
          _key="name" // This key must be the same as yup schema
          _label="Name"
          _placeholder="Seu nome"
          _customStyles={styles.inputDataClient}
          _colors={{
            main: "#7a7a7a",
            error: "#f5427b",
          }}
        />
       ...
Войти в полноэкранный режим

Выйти из полноэкранного режима

const styles = { 
  inputDataClient: {
    label: `
      font-size: 20px; 
      text-align: left;

    `,
    input: `
      font-size: 18px; 
      padding-left: 15px; 
      height: 40px;
      border-radius: 8px;
      color: #A7A7A8;
    `,
    container: `
      margin-top: 20px; 
      align-items: flex-start;
    `,
  },
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Этот независимый проект, но также является частью гораздо большего пакета шаблонов выставки с простой установкой в ​​npx.

Встретиться: @akalli/создать-akalli-приложение

Все это с открытым исходным кодом на GitHub. Оформить заказ, и если у вас возникнут сомнения или проблемы, вы можете создать проблему или связаться со мной по электронной почте dsilva@akalli.com.br.