React Native

:JavaScript言語でAndroidアプリケーションとiOSアプリケーションの2つのライブラリを作成できます.
今回はExpoを利用してアプリを開発する予定です.
Expoは、Expo公式ドキュメントとRN公式ドキュメントのみでアプリケーションの開発が容易になり、開発中のアプリケーションをリアルタイムで表示できるExpoクライアントアプリケーションも提供されます.

1. JSX

1-1. JSXデフォルト構文

①すべてのラベルをインポートして使用

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

②終了マークと自己終了マークを区別する
③全ての装飾を包む一番上の装飾を使う(ラベル<>)
④returnによるレンダリングは、常に括弧で囲まれる
⑤JSX文法外の注釈使用//、内の注釈使用{/**/}

2.装飾

2-1. <View></View>

:スクリーン領域の装飾を制御する

スタイルシートを使用するには、

を使用する必要があります.

2-2. <Text></Text>

:アプリケーションで記事を作成する添付ファイル
タグレス書き込み文字

でエラー

2-3. <ScrollView></ScrollView>

:アプリケーション画面から離れた領域で、スクロールしてすべてのコンテンツのエンティティを表示できます.

2-4. <Button />

:ボタンをクリックしたときのポップアップやページ移動など、さまざまな機能を実行するエンティティ

独自の属性により機能

を実現する.

onPress関数を接続して、イベント

をトリガーします.

2-5. <TouchableOpacity />

:任意の領域にデザインとボタン機能を追加するレイヤー

3. Flex

:コンテンツの場所、エリアレイアウトのプロパティを決定する

flex相対

親要素は、デバイスのフルスクリーンの領域を持ち去ります.

が同じ位置にある子会社のflexプロトコルの割合で領域を区分する.

3-1. flexDirection

:位置決め領域の方向

行は横方向で、列は縦方向に領域を配置します.

defaultは列

です.

3-2. justifyContent

:flexDirectionに位置するプロパティ

プロパティ:flex-start、center、flex-end、space-tween、space-約

3-3. alignItems

:flexDirectionに垂直に配置されたプロパティ

プロパティ:flex-start、center、flex-end、stret

4.MainPageの実装

5.AboutPage実施