React Nativeレイアウトを始めましょう

このチュートリアルでは、Reactネイティブアプリケーションのレイアウトを設計し、スタッキング、グリッドレイアウト、絶対レイアウトなど、アプリケーションで一般的に使用されるレイアウトを実装する方法をガイドします。 Reactネイティブアプリの基本的なスタイルとCSSの使用方法をすでに知っていると思います。そのため、フラットグリッド要素についてあまり説明しないと思います。

直接インポートできます。スナックを使用している場合は、Expoでインストールするかどうか尋ねます。それ以外の場合は、次のコマンドでインストールできます。

ファイルにライブラリをインポートし、さまざまなコンポーネントを抽出します。

npm install react-native-super-grid

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

import { FlatGrid, SectionGrid } from 'react-native-super-grid';

パーティションレスリストをレンダリングするために使用されます。

FlatListSectionListAPIは、すべてをJSXチャイルド要素として使用するのではなく、渡すデータ配列とレンダリング方法に基づいています。これにより、グリッドを書き込む必要がないため、コードを簡素化するのに役立ちますが、データを入力するだけです。

super-grid要約

このチュートリアルでは、React Native Appsのレイアウトを設計する方法を学びました。具体的には、React NativeのFlexboxを使用して要素を見つける方法を学びました。また、React Native Super Gridの使用方法を学びました。これにより、グリッドの実装が容易になります。すべてのレイアウトを使用して、完全なサンプルコードと博覧会スナックを表示できます。

import React from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';
import { FlatGrid } from 'react-native-super-grid';

const styles = StyleSheet.create({
  Item: {
    color: "red"
  },
  Grid: {
    backgroundColor: "grey"
  }
});

export default function JustifyContent() {
    return (
      <flatgrid style="{styles.Grid}" itemdimension="{130}" data="{[1,2,3,4,5,6]}" renderitem="{({" item> (<text style="{styles.Item}">{item}</text>)}
      />
    );
}</flatgrid>

次のチュートリアルでは、カレンダー、リスト、タブナビゲーションなど、アプリケーションで一般的なUI要素を再現することで、学んだことすべてを実践します。

この記事は、ジェイコブ・ジャクソンからの貢献により更新されました。ジェイコブは、ウェブ開発者、ハイテクライター、フリーランサー、オープンソースの寄稿者です。

以上がReact Nativeレイアウトを始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。