More than 1 year has passed since last update.

【React Native】ReactNavigatorをインストール後、シミュレーターが起動しない

Last updated at 2022-11-18Posted at 2022-08-14

環境

Macbook Air 2020
react 18.0.0
react-native 0.69.4
expo 46.0.6
React Native Debugger 0.13.0

１．状況

React Navigatorをインストール後、下記ファイルを編集し expo start -c を実行したが、シミュレーターが起動せずエラーが発生。

App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import HomeScreen from "./screens/HomeScreen";

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js

import React, { useEffect, useState } from "react";
import { StyleSheet, View, FlatList, SafeAreaView } from "react-native";
import ListItem from "../conponents/ListItem";
import Constants from "expo-constants";
import axios from "axios";

const URL = `https://newsapi.org/v2/top-headlines?country=jp&category=business&apiKey=${Constants.manifest.extra.newsApiKey}`;

export default function HomeScreen() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    getNewsData();
  }, []);

  const getNewsData = async () => {
    try {
      const response = await axios.get(URL);
      setArticles(response.data.articles);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <SafeAreaView style={styles.safeAreaView}>
      <View style={styles.container}>
        <FlatList
          data={articles}
          renderItem={({ item }) => (
            <ListItem
              author={item.author}
              image={item.urlToImage}
              title={item.title}
            />
          )}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    backgroundColor: "#1e90ff",
  },
  container: {
    flex: 1,
    backgroundColor: "#fff",
    justifyContent: "center",
  },
});

２．エラー内容

React Native error: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from

日本語訳
React Native エラー: エクスポートの名前空間は、最初に `@babel/plugin-proposal-export-namespace-from で変換する必要があります

３．調査

以下のワードでググる

Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from

４．原因

Reanimated 2.9.0 以降は'react-native-reanimated/plugin' というBabelプラグインをplugins配列に追加する必要があった

５．解決策

react-native-reanimated をインストール

npm install react-native-reanimated

babel.config.js ファイルを編集

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"], //追加
  };
};

expo start -c を実行するも解消されず
node_modules フォルダを削除し、 npm install で再インストール
React Native Debuggerを再インストール

//アンインストール
brew uninstall --cask react-native-debugger

//再インストール
brew reinstall --cask react-native-debugger

シミュレーターが表示された

６．参考資料

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up