[アプリケーション開発]-React Native Expo JSX

3965 ワード
はんのう JSX Node react native npm Expo テキストリンク

📕 2番目のログ


[ログの内容]
  • 反応本機(技術)とExpo(ツール)
  • アプリケーション画面
    • を作成
  • アプリケーションの開発によく使用されるJavascript

    • 💡 はんのうせい

  • 反応本機はjavascript(js)言語でAndroidアプリケーションとiOSアプリケーションを作成するライブラリです.(ライブラリは開発時に使用するツールです.)
    • TIP ❗❗
리액트 네이티브를 개발하다보면 노란색 경고창이 뜨는 경우가 있다.(에러는 아니고 권장사항 정도를 알려주는 박스)

이를 App.js에 다음 코드 한 줄을 넣어서 안보이게 할 수 있다.
console.disableYellowBox = true;

    💡 Expoとは?



    これは、ネイティブ・クロス・プラットフォームを開発するための構築ツールであり、ネイティブ・モジュールのより容易かつ容易に使用できるツールです.

  • アンドロイドアプリとiOSアプリを1つの反応本で作成できるのは事実です.
    場合によっては、Android、iOSそれぞれのフォルダに入り、コードに直接触れる必要があります.

  • この場合、Android、iOS開発言語がよくわからなくても、本アプリケーションに反応するツールの開発を簡単に助けることができるのがExpoです.
    • Expo는 개발 중인 앱 테스트를 위한 Expo 클라이언트 앱을 제공해줍니다.

    Expoインストール

    npm install -g expo-cli

npm: 노드 패키지 매니저 명령을 실행하겠다
install(i): 설치하겠다
-g: 컴퓨터 전역적으로 설치하겠다 == 어디서든지 -g 다음에 오는 명령어를 사용할 수 있게끔
expo-cli: 설치 할 패키지 이름

    Expoプロジェクトのデフォルトフォルダ


    assets
  • アプリケーションの実行とサービスは、基本画像とアイコンファイルを含むフォルダです.
    • node_modules
  • は、ReactiveNative&Expoによってアプリケーションを作成してインストールされた多くのライブラリが格納されている場所です.
    • App.js
  • 反応原生アプリケーション開始の出発線と進入点.
    Webで計算するとindexhtmlまたはmain.htmlのように、メインファイルだと便利だと思います.
    • app.json
  • アプリケーションが所有する基本情報を設定するファイルです.
  • アプリケーションの名称、アプリケーションのリリースバージョン、アプリケーションが携帯電話にインストールされたときに表示するアイコン、アプリケーションが開いたときに表示されるフラッシュメモリ画面、アンドロイドまたはIOSのそれぞれの広告設定など
    • .

    💡 ノードとNPM



    開発者は、あらかじめ作成されたJavaScriptコードを使用するためにノードとNPMが必要です.
  • Node.jsを使用してJavaScript開発環境を構築する
  • NPMに必要なJavaScriptアプリケーション開発ツールを使用すればよい.

    • Yarn

  • 糸はnpmよりも軽く、javascriptパッケージをより迅速に管理するjavascriptパッケージ管理ツールであり、それぞれのメリットとデメリットがある.

    • 💡 反応本体にスクリーンを描く方法

  • 本機の正式文書に反応する
  • Expo公式ドキュメント
    • アプリケーション開発において,反応ネイティブアプリケーション開発において領域(レイアウト)を特定する構文言語をJSXと呼ぶ.
    JSX構文は次のとおりです.

  • 画面上で領域を配置する場合、「表示」を使用して文字をマークする場合は、「テキスト」マークなどを使用します.
    用途に応じてラベルが作成されているので、必要なラベルはいつでも出して使用することができます.

  • ラベルは<>のようにハンマーで表すプログラミング文法!HTMLもタグ構文!
    • //잠시 살펴보는 JSX
//이렇게 상단에서 사용할 엘리먼트를 react-native 라이브러리로부터 꺼내 사용한다.
import { Text, View } from 'react-native';
<View>
<Text>Hello, I am {props.name}!</Text>
</View>

    余白と塗りつぶし


  • マージンとpaddingは、以下の画像のように、領域の外側マージンと内側マージンを決定する.
    • 감사합니다 😊
    Delphiフォームの非表示と表示
    データセンタープログラミング08