자바스크립트밖에 모르는 초보자의 React Native 입문
9869 단어 reactnative자바스크립트React
실수하지 않도록 자신도 잘 조사한 후 부탁드립니다.
대상 독자
나입니다. 시행착오의 기록이 되고 있으므로, 베스트 프랙티스가 아닐 가능성이 충분히 포함되어 있는 것 양해 바랍니다.
환경 구축
Node.js 설치
위 링크에서 다운로드할 수 있습니다.
ReactNative 설치
공식 튜토리얼 에서도 추천하고 있는 바와 같이, 「Expo CLI」라고 하는 「ReactNative+편리한 기능 여러가지」의 패키지를 인스톨 해 봅니다.
그런 다음 휴대 전화의 앱 스토어에서 "Expo"를 검색하고 앱을 스마트 폰에 다운로드하는 것이 좋습니다. 자신의 스마트 폰으로 개발중인 화면을 확인할 수 있습니다.
$ npm install -g expo-cli
위의 명령으로 "Expo CLI"를 설치할 수 있습니다.
새 프로젝트 만들기
빨리 앱 개발에 집중합시다.
$ expo init AwesomeProject
새 프로젝트를 만듭니다. 이번에는 "AwesomeProject"라는 이름을 붙였습니다.
도중에 스타터 템플릿을 무엇으로 할 것인지 묻습니다.
「Blank」라든지 「Blank with TypeScript」라든지, 여러가지 있습니다만, 이번은 처음이므로 「Blank」를 선택해 보았습니다.
cd AwesomeProject
npm start
프로젝트를 만든 후 만든 디렉터리로 이동하여 npm start
로 시작합니다.
브라우저에 CLI가 표시되면 성공입니다.
Expo 다운로드 및 등록
위에서 Expo에 액세스 하 고 SignUp 합니다.
스마트폰이 있으면 공식 앱을 다운로드합니다.
Expo에서 개발 화면 표시
npm start
브라우저에 표시되는 화면에 QR 코드가 있으면 그것을 스마트 폰으로 읽음으로써 개발중인 화면을 표시 할 수 있습니다.
여기 오류!
내 경우에는 여기에서 오류가 발생했습니다.
error Unable to resolve "@react-navigation/native" from "App.js"
음, 처음이므로 무슨 ここち 모듈.
일단 App.js
를 공식 튜토리얼 대로, 간단하게 재작성하는 것으로 해결했습니다.
App.jsimport React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, world!</Text>
</View>
);
}
}
덧붙여서, Hooks에서 함수 컴포넌트로 해도 움직였습니다. ( react-native: 0.61.4
)
App.jsimport React from 'react';
import { Text, View } from 'react-native';
const HelloWorldApp = () => {
return(
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, World!</Text>
</View>
)
}
export default HelloWorldApp
무사히, Hello World까지 따라갔습니다.
React Native의 고유 구성 요소
통상의 JSX로 사용할 수 있는 <div>
나 <h1>
등의 컴퍼넌트 대신에 <View>
나 <Text>
를 사용합니다.
- <View> : <div>や<span>
- <Text> : <p>など文字列の表示に使用
이미지 표시
Hello, World! 대신 이미지를 표시합니다.
React Native는 <img>
대신 <Image>
를 제공하므로 가져오고 사용합니다.
이미지 소스를 지정하는 속성은 src
대신 source
입니다.
App.jsimport React from 'react';
// Imageコンポーネントをインポート
import { Text, View, Image } from 'react-native';
const HelloWorldApp = () => {
// 画像へのパスを定義
let pic = {
uri: 'https://i.picsum.photos/id/237/300/200.jpg'
}
return(
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Image source={pic} style={{width: 300, height: 200}} />
</View>
)
}
export default HelloWorldApp
Props와 State는 일반 React와 동일
같은...라고 생각합니다.
다만, State의 관리는 「Redux」로 실시하는 것이 주류가 되고 있는 것 같습니다. (이것은 React Native뿐만 아니라 일반 React 프로젝트에서도 동일합니다)
요약
...다음
Reference
이 문제에 관하여(자바스크립트밖에 모르는 초보자의 React Native 입문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ShinKano/items/580381710fbeeca32539
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ npm install -g expo-cli
$ expo init AwesomeProject
cd AwesomeProject
npm start
error Unable to resolve "@react-navigation/native" from "App.js"
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, world!</Text>
</View>
);
}
}
import React from 'react';
import { Text, View } from 'react-native';
const HelloWorldApp = () => {
return(
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, World!</Text>
</View>
)
}
export default HelloWorldApp
- <View> : <div>や<span>
- <Text> : <p>など文字列の表示に使用
import React from 'react';
// Imageコンポーネントをインポート
import { Text, View, Image } from 'react-native';
const HelloWorldApp = () => {
// 画像へのパスを定義
let pic = {
uri: 'https://i.picsum.photos/id/237/300/200.jpg'
}
return(
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Image source={pic} style={{width: 300, height: 200}} />
</View>
)
}
export default HelloWorldApp
...다음
Reference
이 문제에 관하여(자바스크립트밖에 모르는 초보자의 React Native 입문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ShinKano/items/580381710fbeeca32539텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)