上一篇介紹了<Text>元件、<Image>元件、<TextInput>元件、<Button>元件，今天將介紹進階原件。

React Native進階元件
<FlatList>和<SectionList>： 用於渲染大型數據列表的元件，支持虛擬化，提高性能。
<ScrollView>元件： 用於實現滾動視圖，處理長內容。
<Modal>元件： 用於顯示模態視窗。
<Touchable>元件： 可觸摸元件，如<TouchableOpacity>和<TouchableHighlight>。

<FlatList>功能介紹
1.完全跨平臺。
2，支援水平佈局模式。
3.行元件顯示或隱藏時可配置回撥事件。
4.支援單獨的頭部元件。
5.支援單獨的尾部元件。
6.支援自定義行間分隔線。
7.支援下拉重新整理。
8.支援上拉載入。
9.支援跳轉到指定行（ScrollToIndex）

如果需要分組/類/區（section），可以直接使用<SectionList>。

<FlatList>的使用

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

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const Item = ({ title }) => {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

畫面：

<SectionList>功能介紹
功能基本上和如果<Flatlist>一樣。但是如果需要把列表進行分類展示，同時給每個分類設定頭部，比如像地址，分類的產品，分類的相簿等，SectionList就是最好的選擇。

<SectionList>使用

<SectionList
  renderItem={({item}) => <ListItem title={item.title} />}
  renderSectionHeader={({section}) => <H1 title={section.key} />}
  sections={[ // homogenous rendering between sections
?    {data: [...], key: ...},
?    {data: [...], key: ...}
  ]}
/>

<Modal>功能介紹
<Modal>是一個用於顯示覆蓋在應用程式畫面上方的輕量級視窗元件。<Modal>通常用於顯示一些臨時性的內容，例如對話框、警告訊息、用戶註冊表單等。以下是Modal組件的主要功能：

1. 顯示臨時性內容：

2. 用於對話框和警告訊息：

3. 用戶輸入表單：

4. 自定義內容：

5. 調整樣式和位置：

6. 動畫效果：

7. 事件處理：

<Model>元件使用：

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

const MyModal = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="顯示Modal" onPress={() => setIsVisible(true)} />
      <Modal
        animationType="slide"
        transparent={true}
        visible={isVisible}
        onRequestClose={() => setIsVisible(false)}
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <Text>這是一個Modal</Text>
            <Button title="關閉Modal" onPress={() => setIsVisible(false)} />
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    alignItems: 'center',
  },
});

export default MyModal;

在這個範例中，Modal用於顯示一個包含文本和關閉按鈕的彈出視窗。當按下"顯示Modal"按鈕時，Modal顯示在畫面上方，當按下"關閉Modal"按鈕時，Modal消失。這僅僅是一個簡單的示例，你可以根據需求在Modal內部放置更多的元件和邏輯。

<Toachable>功能介紹
<Touchable>似乎React Native的按鈕元件，一共有四大類：
<TouchableWithoutFeedback>:不帶任何反饋的可觸摸元件
<TouchableHighlight>:在<TouchableWithoutFeedback>的基礎上添加了當按下時背景會變暗的效果。
<TouchableOpacity>:相比<TouchableHighlight>再按下去背景會變暗的效果，<TouchableOpacity>會在使用者手指按下時降低按鈕的透明度，而不會改變背景的顏色。
<TouchableNativeFeedback>:在Android上還可以使用<TouchableNativeFeedback>,它會在使用者手指按下時行程類似水波紋的視覺效果。但是此元件只支持Android。

<TouchableOpacity>使用

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

const MyTouchableComponent = () => {
  const handlePress = () => {
    console.log('按下了Touchable元件！');
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={handlePress} style={styles.touchable}>
        <Text style={styles.text}>點我！</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  touchable: {
    backgroundColor: 'lightblue',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    fontSize: 18,
  },
});

export default MyTouchableComponent;

在這個範例中，我們創建了一個名為<MyTouchableComponent>的React組件。這個組件中包含一個<TouchableOpacity>元件，當使用者點擊這個元件時，<handlePress>函數會被調用，並且在控制台上顯示一條訊息。

在實際應用中，你可以在<TouchableOpacity>內部放置任何你想要的元件，並根據需要處理不同的觸摸事件。你也可以使用其他<Touchable>元件，它們具有不同的效果和特性，可以根據你的設計需求選擇合適的元件。

參考資料：征服React Native—列表元件https://ifun01.com/873QNF4.html
ReactNative之FlatList的具體使用方法
https://www.itread01.com/article/1511921205.html