React Native는 모바일 친화적인 애플리케이션을 작성하기 위한 최고의 프레임워크 중 하나입니다. 매우 빠르고 일반적인 프로그래밍 패턴을 사용하며 기본 운영 체제에 바로 연결됩니다. 야심 찬 개발자와 팀이 계속해서 React와 프로젝트를 채택하는 것은 놀라운 일이 아닙니다.

학습 곡선이 다소 가파를 수 있지만 React is the most popular application library , 지금까지는 의문의 여지가 없습니다. 이러한 인기는 자매 라이브러리인 React Native가 모바일 분야에서도 우위를 차지하는 데 도움이 됩니다.

바닐라 React Native에는 포함되지 않은 프로덕션 준비 애플리케이션에 필요한 몇 가지 모듈이 있습니다. 이러한 모듈 중 다수는 저장소, 세션 캐시 및 토큰 관리를 처리하기 위해 일종의 백엔드가 필요하기 때문입니다. 다행히 serverless programming은 독립 실행형 프런트엔드 프로젝트에 이러한 기능을 추가하여 웹 및 응용 프로그램 개발자의 역량을 강화했습니다. 이러한 기술은 애플리케이션 개발 시스템에 대한 진입 장벽을 크게 낮춥니다.

이러한 서버리스 기능을 구현하거나 애플리케이션에서 이를 사용할 수 있도록 도와주는 사용하기 쉬운 3가지 라이브러리를 살펴보겠습니다.

1. 반응 네이티브 UI 라이브러리

Github

견고한 UI 구성 요소 라이브러리는 거의 모든 React Native 프로젝트에 중요합니다. 이러한 라이브러리는 운영 체제에서 표준이 아닌 기본 기본 구성 요소와 달리 다양한 장치에서 애플리케이션에 동일한 모양과 느낌을 제공합니다.

React-native-ui-lib는 이에 대한 훌륭한 솔루션입니다. 가장 많이 사용되는 것은 아니지만 구성 요소는 간결하고 성숙하며 서버리스 모듈의 데이터와 상호 작용할 때 매우 유용합니다. 예를 들어 로그인/가입 로그인 인증 보기를 구현하거나 클라우드 데이터베이스에서 검색된 데이터를 표시합니다.

다음은 이 라이브러리의 구성 요소에 대한 데모입니다. 백엔드 데이터를 시각화하고 인터페이스할 때 이것이 얼마나 유용한지 쉽게 알 수 있습니다.



구성 요소 가져오기를 'react-native'에서 'react-native-ui-lib'로 옮기기만 하면 됩니다!

import React, {Component} from 'react';
import {View, Text, Card, Button} from 'react-native-ui-lib';

class MyScreen extends Component {
  render() {
    return (
      <View flex>
        <Text heading>My Screen</Text>
        <Card height={100} center>
          <Text body>This is an example card </Text>
        </Card>

        <Button label="Button" body square></Button>
      </View>
    );
  }
}

2. 이지베이스 반응

Github

이 라이브러리는 프로젝트를 단순한 사용자 인터페이스에서 전체 스택 애플리케이션으로 전환하는 서버리스 기능을 제공합니다. 유일한 전제 조건은 free account 을 생성하는 것입니다.

여기에서 를 만들거나 구현할 수 있습니다. 이 라이브러리는 기본적으로 모듈을 제공합니다. 따라서 useEasybase() 후크를 통해 필요한 모든 기능을 사용할 수 있는 경우 자체 백엔드 서비스를 생성할 필요가 없습니다!

루트 구성 요소를 EasybaseProvider로 래핑한 다음 제공된 토큰을 전달합니다. 이 토큰은 Easybase에서 프로젝트 또는 통합을 생성하여 얻습니다.

import { EasybaseProvider, useEasybase } from "easybase-react";   
import ebconfig from "ebconfig.js";    

function App() {
    return (
        <EasybaseProvider ebconfig={ebconfig}>
            <ProjectUser />
        </EasybaseProvider>
    )
}

function ProjectUser() {
  const { isUserSignedIn, signIn, signUp } = useEasybase();

  if (isUserSignedIn()) {
    return (
      <div>
        <h2>You're signed in!</h2>
        <FrameRenderer />
      </div>
    )
  } else {
    return (
      <div style={ { display: "flex", flexDirection: "column" } }>
        <h4>Username</h4>
        <input value={usernameValue} onChange={e => setUsernameValue(e.target.value)} />
        <h4>Password</h4>
        <input type="password" value={passwordValue} onChange={e => setPasswordValue(e.target.value)} />
        <button onClick={_ => signIn(usernameValue, passwordValue)}>
          Sign In
        </button>
        <button onClick={_ => signUp(usernameValue, passwordValue)}>
          Sign Up
        </button>
      </div>
    )
  }
}

그렇게 쉽습니다! Easybaseeasybase-react 및 React/React Native 사용에 대한 자세한 내용은 .

3. 반응 네이티브 fs

Github

사용자 장치와 Easybase 간에 파일을 동기화하려는 상황이 예상되는 경우 이 라이브러리는 로컬 파일 시스템과 상호 작용하는 데 유용합니다. 이 라이브러리로 파일을 읽는 것은 updateRecordFile()의 useEasybase() 기능과 잘 작동하여 파일을 클라우드 데이터베이스로 보냅니다. (이미지의 경우 react-native-image-picker 사용).

그 외에도 장치의 로컬 파일 시스템에 액세스하기 위한 다른 많은 사용 사례가 있습니다. 예를 들어 개발자는 로컬에서 음성 메모를 스캔하거나 저장하는 데 사용할 수 있는 PDF 파일이 있는지 확인하려고 할 수 있습니다.

다음은 기본 디렉터리에서 모든 파일 내용을 기록하는 것이 얼마나 쉬운지 보여줍니다.

var RNFS = require('react-native-fs');

RNFS.readDir(RNFS.MainBundlePath) // On Android, use "RNFS.DocumentDirectoryPath" (MainBundlePath is not defined)
  .then((result) => {
    console.log('GOT RESULT', result);
    return Promise.all([RNFS.stat(result[0].path), result[0].path]);
  })
  .then((statResult) => {
    if (statResult[0].isFile()) {
      return RNFS.readFile(statResult[1], 'utf8');
    }
    return 'no file';
  })
  .then((contents) => {
    console.log(contents);
  })
  .catch((err) => {
    console.log(err.message, err.code);
  });