React Nativeでよく見かけるエラー
ちょくちょくみかけるエラーで、英語が苦手な人向けにメモです。
React Nativeでは、エラー追跡がなかなか面倒なため、参考になればうれしいです。
どんなエラー？
Identifier ‘Text’ has already been declared というやつですね。
React Nativeで新しいライブラリやモジュールを使うときとかはよくみます。
意味は？
直訳だと、「識別子 ‘Text’はすでに宣言されています」です。
つまりTextというコンポーネントが、重複されていますよ。と教えてくれています。
先に、react-native-elementsをnpmでインストールしておきます。
|
1 |
npm install --save react-native-elements |
中身のコードは こんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Text } 'react-native-elements' export default function App() { return ( <View style={styles.container}> <Text>Hello World!</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); |
原因と対処法
原因は、react-native ライブラリと react-native-elementsライブラリの両方で「Text」というコンポーネントを使用しているため、どちらを使うかわからなくなっています。
解決法は、いくつかあります。
- どちらかのコンポーネントを削除する
- import するときに名前を変える
名前は、下記のようにText という名前をTextElementという名前で利用すると宣言するとエラーは無くなります。
|
1 2 3 |
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { Text as TextElement } from 'react-native-elements' |
