React Native 입니다. 이를 사용하여 단일 코드베이스로 Android 및 iOS 장치 용 응용 프로그램을 개발할 수 있습니다. 네이티브 파워 반응 Instagram 및 Facebook 과 같은 세계에서 가장 인기있는 앱 중 일부이며,이 게시물에서는 Android 용 첫 번째 React Native 앱을 만드는 방법을 보여 드리겠습니다.

React Native Code 의 예

일반적인 모바일 앱 화면의 React Native code 는 다음과 같습니다:

import * as React from 'react';import {Text, View, Stylesheet} from 'react-native';const ExampleScreen = (props) { return ( <View style = {styles.containerStyling}> <Text style = {styles.textStyling}> Hello world!</Text> </View> );}const styles = Stylesheet.create({ containerStyling:{ background: '#0000FF' }, textStyling :{ marginBottom :20, color:'#FFF' }});export default ExampleScreen

자세히 보면 React Native 가 JavaScript,HTML 유사 마크 업 및 CSS 의 조합을 사용한다는 것을 알 수 있습니다. 이 코드 스 니펫은 텍스트 표시 및 스타일링이있는 화면을 정의합니다.

반응기 개발 환경 엑스포의 반응하는 대본 CLI

있을 만드는 방법에는 두 가지 반응하는 기본 응용 프로그램:

1. 엑스포 CLI
2. 반응하는 기본 CLI

I’ll 에 대해 이야기의 장점과 단점은 각각의 아래에 있다.

Expo CLI

Expo 는 오픈 소스 프레임 워크이며 관리되는 앱 개발 워크 플로를 제공하는 범용 React 애플리케이션을위한 플랫폼입니다. 그것은 도구와 서비스 구축 주위에 반응하는 기본과 원하는 플랫폼을 개발하는 데 도움,빌드,배포,그리고 신속하게 반복 iOS,안드로이드 및 웹 애플리케이션에서 동일한 자바 스크립트 또는 호환되지 않습니었습니다.

Expo 는 React 네이티브 앱 구축과 관련된 모든 복잡성을 없애줍니다. 엑스포 CLI 의 일부 기능은 다음과 같습니다:

• 카메라,지도,알림,센서,햅틱 등과 같은 기능에 대한 액세스를 제공하는 범용 Api.
• 앱 스토어 준비 바이너리를 제공하고 인증서를 처리하는 클라우드 기반 빌드 서비스입니다.
• 상점에 제출하는 번거 로움과 지연없이 언제든지 앱을 업데이트 할 수있는 공중파 업데이트.

React Native CLI

React Native CLI 는보다 기본적이고 베어 메탈 개발 환경입니다. 좋은 점은 클라우드 서비스에 의존하지 않고 자신의 컴퓨터에서 앱 바이너리를 빌드하는 것이 가능하다는 것입니다. 반면에 설정은 훨씬 더 복잡합니다—Android 용 앱을 빌드하려면 Android Studio 를 설치하고 시작하기 전에 많은 기능을 구성해야합니다. 이 프로세스는 약간 복잡 할 수 있지만 React Native CLI 환경은 전문 앱 개발자에게 더 적합합니다.

이 튜토리얼에서는 React 네이티브 앱 구축을 시작하는 가장 쉬운 방법이기 때문에 Expo 를 사용할 것입니다.

는 방법 엑스포 작품

을 사용하여 박람회,당신은 처음 설치해야 박람회 클라이언트 응용 프로그램에서 사용할 수 있는 플레이 스토어(버전에서도 사용할 수 있 iOS 앱스토어). 엑스포 클라이언트 앱을 사용하면 실시간으로 테스트 목적으로 앱을 실행할 수 있습니다.

좋아하는 프로그래밍 텍스트 편집기로 자신의 컴퓨터에서 React Native 앱을 코딩 한 다음 Expo CLI 를 사용하여 앱을 테스트하거나 게시 할 수 있습니다. 무대 뒤에서 Expo 는 React 네이티브 코드를 패키징하여 기기의 Expo 클라이언트 앱에서 사용할 수 있도록합니다. 사용할 수도 있습니다 엑스포 CLI 를 게시하는 응용 프로그램을 사용할 수 있는 사람과 함께 클라이언트 엑스포,또는 독립형 버전의 앱을 업로드할 수 있는 앱 스토어와 설치하지 않고 실행 Expo 클라이언트입니다.

Expo 로 앱 만들기

이 튜토리얼에서는 Expo CLI 를 사용하여 앱을 만들 것입니다.

전제 조건

Expo 로 React Native 앱을 만들려면 다음을 충족해야합니다.

• 노드.js 버전 12LTS 또는 더 높은 진행하고 있습니다.컴퓨터에
• 안드로이드 기기와 롤리팝(안드로이드 5)이상
• 엑스포 클라이언트 응용 프로그램이 설치되어 안드로이드 디바이스(다운로드 엑스포에 대한 클라이언트 안드로이드 플레이 스토어에서)
• 의 기본적인 이해 ReactJS 나 자바스크립트

또한,주신의 개발을 컴퓨터 및 전화 연결되어야와 동일한 무선 네트워크입니다.

다운로드 노드.js

노드를 방문하십시오.js 웹 사이트 및 최신 버전의 노드를 다운로드하십시오. 노드는 Windows,macOS 및 Linux 운영 체제에서 사용할 수 있습니다. 운영 체제를 선택하고 사이트에서 사용할 수있는 지침에 따라 설치하기 만하면됩니다.노드가 있는지 확인해야합니다.js 설치,터미널 창을 열고 입력:

node -v

이 명령을 표시됩니다 설치된 노드 버전입니다.

Expo Cli 설치

노드를 설치한 후에는 Expo CLI 클라이언트도 설치해야 합니다. 단순히 다음 명령을 실행합니다.

 npm install expo-cli --global

macOS 과 리눅스 사용자,사용하는지 확인하십시오sudo.

sudo npm install expo-cli --global

엑스포 CLI 를 설치하는 과정에서 발생하는 모든 경고 또는 오류를 무시합니다. 성공적으로 설치 한 후에는 아래 메시지를보아야합니다.

을 만들지로 반응하는 기본

을 만들어 가겠습니다 간단하게 사용할 수 있는 입력 작업의 목록은 당신이 수행하는 데 필요에 표시합니다.

Expo 로 새 프로젝트 만들기

시작하려면 다음 Expo CLI 명령을 실행하여 새 프로젝트를 만듭니다:이 경우 프로젝트 이름을 지정하지 않아도됩니다. 프로젝트의 템플릿을 선택하라는 메시지가 표시됩니다. 지금은 최소한의 종속성을 제공하는 빈 템플릿을 선택하십시오.

expo init명령은 프로젝트 폴더를 만들고 React Native 앱에 필요한 모든 종속성을 설치합니다.

expo init tasklist-app? Choose a template: expo-template-blank📦 Using npm to install packages. You can pass --yarn to use Yarn instead.✔ Downloaded and extracted project files.✔ Installed JavaScript dependencies.✅ Your project is ready!To run your project, navigate to the directory and run one of the following npm commands.- cd tasklist-app- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.- npm run android- npm run ios # requires an iOS device or macOS for access to an iOS simulator- npm run web

프로젝트 폴더로 이동하여 다음 명령을 실행하십시오:

cd tasklist-appnpm start

npm start를 시작합니다 엑스포 개발 도구 및에서 새 탭을 열고 당신의 브라우저는 다음과 같습니다.

이 창을 실행할 수 있습에 자신의 시뮬레이터 또는 연결된 장치입니다.

장치 연결

이제 실제 Android 장치에서 Expo client 앱을 열고 아래 그림과 같이 Qr 코드 스캔 옵션을 선택하십시오.

다음 엑스포 dev 창의 바코드를 스캔 및 기 JavaScript 번들 빌드 프로세스를 완료합니다. 이것은 보통 몇 분이 걸립니다. 프로세스가 완료되면 응용 프로그램이 휴대 전화에서 실행되어야합니다!

프로젝트 구조

이제는 개발 환경이 준비,당신은 편집할 수 있는 프로젝트의 코드를 사용하여 귀하의 기본 코드 편집기입니다. 프로젝트 폴더는 다음과 같이 보입니다:

• 자산을 보유하고 이미지에 대한 응용 프로그램
• node_modules:을 포함하는 모든 종속성을 위해 프로젝트
• 응용 프로그램.js:UI 를 렌더링하는 코드를 보유하고 필수 파일

앱입니다.위의 스크린 샷에서 js 가 열려 있습니다. 자세히 살펴 보겠습니다. 먼저ReactreactTextViewreact-nativeStylesheet를 가져옵니다.

반응하는 기본 내장되어 있어서 구성 요소 등<Text><View>반대하는 표준 HTML 구성 요소,같은<div><p><View><div>HTML. <Text><p>HTML.응용 프로그램의 상용구 버전에서.js Expo 가 생성하면 텍스트 구성 요소와 상태 표시 줄이있는 간단한보기가 있습니다. 이 뷰는App()styles상수에는 뷰 스타일을 지정하는 몇 가지 기본 CSS 가 포함되어 있습니다.

다음으로 앱에 몇 가지 새로운 구성 요소와 스타일을 추가합시다!응용 프로그램 UI 만들기

응용 프로그램을 엽니 다.js 파일을 작성하고 다음 코드를 입력하십시오.

import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} /> <Button title = "+"/> </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center', bottom:20 },});

위의 코드를 추가 단순한 텍스트 입력하고 단추를 추가하는 새로운 작업입니다. Css flexbox 스타일을 사용하여 구성 요소를 서로 옆에 배치합니다.

이벤트 처리를 추가

를 얻는 사용자 입력,우리는 첫번째 가져오는useState()reactnewTask()setnewTask()App()return

const = useState('');

우리는 우리를 정의는taskInputHandlersetNewTask()App()기능은 다음:

 const taskInputHandler = (enteredText) => { setNewTask(enteredText); };

이제 우리는 등록이 입력 처리기와 함께TextInputTextInput구성 요소를 업데이트하십시오.

 <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} />

이제 버튼 누름을 처리해야합니다. 사용자가+버튼을 누르면 새 작업을 목록에 추가하려고합니다.

첫째,우리는 우리의 상태에 대한 작업의 목록:

 const = useState();

다음에,우리는 우리 정의는addTaskHandlernewTask주)목록에 있습니다.

 const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); };

고 등록하는 이벤트를 처리기와 함께<Button>구성 요소:

 <Button title = "+" onPress = {addTaskHandler} />

마지막으로,우리는 추가로 새로운 뷰를 표시하는 모든 작업 목록에서 우리가 만들어집니다. 이것은 입력 컨테이너보기 직후에 진행되지만 여전히 메인 컨테이너보기 안에 있습니다.

 <View> {appTasks.map((task) => <Text>{task}</Text>)} </View>

앱의 전체 소스 코드.js

앱의 전체 코드입니다.js 는 아래와 같습니다. 당신이 가진 것과 비교하십시오.

 import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { const = useState(''); const = useState(); const taskInputHandler = (enteredText) => { setnewTask(enteredText); }; const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); }; return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} /> <Button title = "+" onPress = {addTaskHandler} /> </View> <View> {appTasks.map((task) => <Text>{task}</Text>)} </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center, bottom:20 },});

결론

이 튜토리얼에서는 Expo 로 React Native 앱을 만드는 방법을 배웠습니다.

React Native 는 훌륭한 프레임 워크이며 개발자와 기업 모두에게 인기있는 플랫폼입니다. React Native 로 만든 앱은 모든 플랫폼이나 시스템에서 원활하게 작동하도록 보장됩니다. React Native 는 또한 앱을 한 번 코딩하고 모든 모바일 플랫폼에서 실행하도록하여 개발 작업을 저장합니다.

CodeCanyon 의 프리미엄 모바일 앱 템플릿

CodeCanyon 은 Android,iOS,React Native 및 Ionic 용 수백 개의 모바일 앱 템플릿이있는 온라인 마켓 플레이스입니다. 그 중 하나를 사용하여 며칠,심지어 몇 달 동안 노력을 절약 할 수 있습니다.

React Native 를 막 시작하든 노련한 개발자이든 React Native 앱 템플릿은 다음 앱 프로젝트에 시간과 노력을 절약 할 수있는 좋은 방법입니다.

데 문제가 있으면 결정 템플릿지 압축은 바로 당신을 위한 이러한 기사를 도와야 한다:

• 
  Mobile App
  21+ Best React Native App Templates of 2021 (Including 5 Free)
  Franc Lucas
• 
  Ionic
  15 Stunning Ionic App Templates and Ionic Themes
  Franc Lucas
• 
  React
  9 React Native App Templates for You to Study and Use
  Franc Lucas