준비

XCode
AppStore에서 다운로드
이것이 없으면 시작되지 않습니다.
Mac의 OS 버전으로 설치할 수 없습니다.
항상 최신 레벨이 아니면 바로 설치할 수 없게 되므로 주의.

Node/NPM
Node・・・Node.js의 일. 서버 측에서 움직이는 javascript입니다.
NPM ... 패키지 관리 도구. React, ReactNative, Babel 등의 js 확장 기능을 관리하는 도구

Node 설치
brew install node

NPM 설치

watchman
brew install watchman
파일 변경을 모니터링하는 도구

RN CLI (React Native Command Line Interface)
npm i -g react-native-cli

※참고
htps // 라라를 rld. 코 m/레아 ct_나치ゔぇ-부이 ld/
htps : // 라라를 rld. 코 m / Rea ct-nachiゔ ぇ 토리 토리 /

Hello World 보기

터미널

react-native init reactHello

※도중 「info Installing required CocoaPods dependencies」에서 멈추고 있는 것처럼 느린

터미널

cd reactHello

npm i

react-native run-ios

※시뮬레이터 기동(초회는 늦다)

Welcome to React라는 제목의 화면이 나올 것입니다.
향후 버전에 따라 달라질 수 있음

디렉토리 및 파일

├── App.js
├── tests
├── 안드로이드
├── app.json
├── index.js
├── ios
├── node_modules
├── package-lock.json
├── package.json
└── yarn.lock

+ 추가
└── src 이 안에 아이 컴퍼넌트 넣어 간다

부모 Component 만들기

App.js 다시 쓰기
※참고 기사로 index.js가 되어 있습니다만, 기사에서는 아마 이전의 버전에서의 일이라고 생각합니다

App.js

import React from 'react';
import { Text, AppRegistry } from 'react-native';

const App = () => (
  <Text>Hello World!</Text>
);

export default App;
// 記事の「AppRegistry.registerComponent('test', () => App);」だとエラーになった

이제 Hello World!가 표시되었습니다.

아이 Component 만들기

src/Header.js

import React from 'react';
import { Text, View } from 'react-native';

const Header = () => {
  const { headerText, header } = styles;
  return (
    <View style={header}>
      <Text style={headerText}>ヘッダー</Text>
    </View>
  );
};

const styles = {
  header: {
    backgroundColor: '#F8F8F8',
    justifyContent: 'center',
    alignItems: 'center',
    height: 90,
    paddingTop: 25,
    elevation: 2,
    position: 'relative'
  },
  headerText: {
    fontSize: 20,
    fontWeight: '600'
  }
};

export default Header;

App.js 수정

App.js

// 追加
import Header from './src/Header';

// 修正
const App = () => (
  <View>
    <Header />
  </View>
);

부모에서 자식으로 매개 변수 전달

App.js 수정

App.js 수정

....
// 修正
const App = () => (
  <View>
    <Header showText={'Hello'} />
  </View>
);
....

src/Header.js 수정

src/Header.js

....

const Header = (props) => {
  const { headerText, header } = styles;
  return (
    <View style={header}>
      <Text style={headerText}>{props.showText}</Text>
    </View>
  );
};

.....

font 관계에서 오류가 발생한 경우의 조치
h tps : // wp- 쿄토. 네 t / Rea ct-nachi ゔ ょ ゔ c r-i gon s r-dsc rr-u th- 흠뻑 g에 꼭 드 푹 t - 온-오/