🎉 다음과 같은 CSS 스타일의 React Native용 @akalli/components 스마트 구성 요소를 소개합니다.

@akalli/components은 스마트 구성 요소 및 양식 유효성 검사의 React Native용 프레임워크입니다. styled-components가 있는 chakra-ui/native-base 아이디어의 자식이라고 생각할 수 있습니다.

Enough talk, just an example can make this clear lol :).

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

용법

이 구성요소 lib와 연관된 special props는 _로 식별됩니다. prop with _가 표시될 때마다 이는 우리 라이브러리 중 하나라는 의미이며 다른 모든 것은 react-native와 동일합니다. 물론 TypeScript 덕분에 구성 요소에서 _를 눌러 사용할 예약을 확인할 수 있습니다.

구성품

스페셜 뷰

보기 - RN의 보기와 동일합니다.

HSection 및 VSection - 보기이지만 방향이 지정되고 의미론적입니다.

ScrollView - RN의 ScrollView와 동일합니다.

Center, HCenter 및 VCenter - 중앙 집중화 스타일이 다른 보기입니다.

표시 - 조건 논리가 있는 보기로, 보다 명확하고 의미론적인 조건부 렌더링을 만드는 데 좋습니다. 여기에는 잘못된 경우에 대한 소품_fallback이 포함됩니다.

기울기

FlatList - FlatList와 동일합니다.

SectionList - SectionList와 동일합니다.

입력

TextInput - RN의 TextInput과 동일합니다.

입력 - 확인 후크 useMyForm(yup과 통합됨)과 함께 작동하는 입력입니다.

기타

헤더 - 아이콘으로 헤더를 구현하는 더 쉬운 방법입니다.

테마 및 변형

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

<MyThemeProvider theme={initialTheme}>
  <View _variant='viewBgRed'>
   <Text>Hey coders!</Text>
  </View>
</MyThemeProvider>

후크

useMyStyle - 이 후크는 동적 스타일에 사용됩니다. 다시 렌더링하지 않고 동적으로 스타일을 지정할 수 있습니다.

// This will only be called again when lang changes.
 const changeLangButtonStyle = useMyStyle(styles.changeLangButton(lang), [
    lang,
  ]);

useMyStyledComponent - 이를 통해 우리의 철학을 사용하여 자신만의 구성 요소를 만들 수 있습니다.

useMyTheme - 테마에 액세스할 수 있습니다. 사용하려면 앱을 당사MyThemeProvider 및 피드theme prop로 래핑해야 합니다.

useMyForm - 이 후크는 양식 유효성 검사에 사용되며 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/create-akalli-app

GitHub의 모든 오픈 소스입니다. 체크 아웃하고 의심이나 문제가 있으면 문제를 만들거나 내 이메일[email protected]로 연락할 수 있습니다.