🚀 개츠비 + 웹용 리액트 네이티브 + 엑스포 🥳

요약: 🎳Example 📚Docs



이 게시물에서는 웹을 타겟팅할 때 Gatsby을 사용하도록 (범용) Expo 앱을 설정하는 방법을 보여드리겠습니다!

🚨 If you find bugs please report them on the expo-cli repo with the [gatsby] tag in the title.

Gatsby를 Expo와 함께 사용하는 이유는 무엇입니까?

이 작업의 주요 이점은 다음과 같습니다.

prerender 앱의 웹 파트를 Expo 할 수 있습니다.

이미 Gatsby를 사용하고 있다면 이제 웹과 모바일 간에 대부분의 코드를 공유할 수 있습니다.

Expo를 처음 사용하는 경우 브라우저에서 가능할 때마다 카메라, 제스처, 권한 등과 같은 Expo SDK의 복잡한 브라우저 기능을 사용할 수 있음을 의미합니다!

⚽️ 튜토리얼

Expo CLI 설치 또는 업데이트: npm i -g expo-cli

새 엑스포 프로젝트 생성: expo init

Gatsby 플러그인을 설치합니다.

  # yarn
  yarn add gatsby gatsby-plugin-react-native-web

  # npm
  npm install --save gatsby gatsby-plugin-react-native-web

gatsby-config.js를 만들고 플러그인을 사용합니다.
gatsby-config.js

   module.exports = {
     plugins: [
       `gatsby-plugin-react-native-web`,
       /* ... */
     ],
   }

/.cache 및 /public를 .gitignore 에 추가

이제 Gatsby 프로젝트의 첫 번째 페이지를 만듭니다.

페이지 폴더 만들기: mkdir -p src/pages

파일을 만듭니다.

  # JS
  cp App.js src/pages/index.js

  # TS
  cp App.tsx src/pages/index.tsx

yarn gatsby develop를 실행하여 사용해 보십시오!

브라우저에서 프로젝트 열기http://localhost:8000/

문제 해결

Expo CLI 없이 프로젝트를 시작한 경우 다음 작업도 수행해야 할 수 있습니다.

Gatsby CLI로 프로젝트를 시작한 경우 문서에 작성한 가이드를 확인하십시오: Gatsby Project with Expo .

웹용 React Native 설치: yarn add react-native-web

React Native 웹용 babel 사전 설정을 설치합니다.

  # yarn
  yarn add --dev babel-preset-expo
  # npm
  npm install --save-dev babel-preset-expo

💡 이름에 Expo가 포함되어 있지만 범용 플랫폼 지원을 제공하므로 모든 React Native 프로젝트에 사용할 수 있습니다.

babel.config.js를 만들고 Babel 사전 설정을 사용합니다.
babel.config.js

   module.exports = { presets: ['babel-preset-expo'] }

🏁 새로운 명령

웹 시작

🚫 expo start:web

✅ yarn gatsby develop

웹 구축

🚫 expo build:web

✅ yarn gatsby build

정적 프로젝트 제공

🚫 serve web-build

✅ yarn gatsby serve

📁 파일 구조

Gatsby를 지원하는 Expo 프로젝트에 권장되는 파일 구조는 다음과 같습니다.

Expo Gatsby
├── src
│   └── pages ➡️ Routes
│       └── index.tsx ➡️ Entry Point for Gatsby
├── .cache ➡️ Generated Gatsby files (should be ignored)
├── public ➡️ Generated Gatsby files (should be ignored)
├── assets ➡️ All static assets for your project
├── App.tsx ➡️ Entry Point for Mobile apps
├── app.json ➡️ Expo config file
├── gatsby-config.js ➡️ Gatsby config file
└── babel.config.js ➡️ Babel config (should be using `babel-preset-expo`)

👋 읽어주셔서 감사합니다

이 기사가 도움이 되었기를 바랍니다. 이 워크플로를 사용한다면 어떻게 작동했는지 듣고 싶습니다 😁 사용하지 않았다면 듣고 싶습니다! 그러니 저에게 이모티콘을 트윗해보세요 :)

📚 추가 정보

Expo support PR

Example

Docs

Tips and Tricks for React Native web