React Nativeにおけるアロー関数のオブジェクト定義エラー

Question

React Nativeの公式サイトで学習をしています。
現在、
Node.js -v13.13.0
Expo-cli -v3.19.2
を使用しています。

下記のサンプルコードをApp.jsに入力したところ、

ReferenceError: SectionListBasics is not defined

とアロー関数の部分でエラーが表示されてしまいます。
アロー関数を使わずファンクションを定義すると実行可能です。
なお、Reactのパッケージ、create-react-appではアロー関数が使えていました。
これはExpoのインストールに失敗しているのでしょうか？

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

export default SectionListBasics = () => {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

Answer 1

export default はアロー関数の前には付けることができません。
逆に普通の関数には付けられることを知りませんでした。

下記の通り書けばできるかと思います。

const SectionListBasics = () => {
    return (
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
}

export default SectionListBasics

Comments

[howareyou1245]

ありがとうございます。
実行出来ました。