Bun

BunでExpoプロジェクトの作成

keisuke-333 28日前

Issue

Xcodeが起動しないIssue

keisuke-333 28日前に更新

コンポーネント

主要コンポーネント

ScrollView

コンテンツがビューポートよりも大きい場合にスクロールができるようにする
https://reactnative.dev/docs/scrollview

import { ScrollView, Text } from 'react-native';

const App = () => {
  return (
    <ScrollView>
      <Text>長い長いテキストがここに入ります。</Text>
      {/* さらにコンテンツを追加... */}
    </ScrollView>
  );
}

export default App;

FlatList

大量のデータを部分的にレンダリングし、スクロール時の高パフォーマンスを実現する
https://reactnative.dev/docs/flatlist

ScrollViewとFlatListの主な違い↓

項目	ScrollView	FlatList
用途	任意のスクロール可能なコンテンツ	大量のデータを持つリスト
レンダリング	すべてのコンテンツをレンダリング	現在のビューポートに必要な部分のみをレンダリング
パフォーマンス	大量のデータだと低下する可能性がある	大量のデータでも高いパフォーマンスを維持
データの部分更新	全体を再レンダリング	変更された部分のみを更新

ScrollView ：スクロール可能なシンプルなリスト
FlatList：大量のデータを効率的に扱う必要があるリスト

SafeAreaView

端末の溝(ノッチ)やソフトウェアバー(ナビゲーションバー)を考慮してコンテンツを適切にレイアウトするためのコンポーネント