質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Q&A

解決済

1回答

1287閲覧

export defaultでよく見られるログ。これってAppRegistryのエラーでも出て来る?

MOTOMUR

総合スコア195

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

0グッド

0クリップ

投稿2018/01/26 07:14

編集2018/01/26 07:15

コーディングしていたら、このようなログが出て来て、検索をかけて見ました。

terminal

1Invariant Violation: Element type is invalid: expected a string (for built-in components) 2or a class/function (for composite components) but got: undefined. 3 You likely forgot to export your component from the file it's defined in.

検索によると、export default忘れるとこのようなログが出るらしい。
しかし、私そんなこと忘れてはいません。なのになぜかエラーが出てしまいます。

しかしここで気がつきました。
reactjsと違い、nativeはAppRegistryというものが追加されています。

理解もせずに適当に扱って来たけど実はかなり大事だったのではないか???

と思い、色々検索をかけて見ましたが、公式以外にこれについて詳しくない記事ばかり。

公式ですら、Methodsを連ねているだけです。

どなたか、AppRegistryに詳しい方、もしくは詳しいドキュメントを読んだ方はお助け下さい。

補足ですが、エラーが出るようになってしまったファイルは、ルーティングで呼び出されたページの子のコンポーネントファイルです。

ルート→view→viewの子のコンポーネント ←このファイルのAppRegistryがダメなんだと思います。(export default)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

どういったソースがわからないと問題がわからないのですが、次のエラーメッセージは undefined が export されているよ、というものです

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

↓が参考になりますので見直してみてください

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export

多分 AppRegistry は関係ないです

投稿2018/01/26 07:33

編集2018/01/26 07:34
januswel

総合スコア301

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MOTOMUR

2018/01/26 09:49

コードはこのような感じですね import React, { Component } from 'react'; import { AppRegistry, Alert, StyleSheet, View } from 'react-native'; import { Container, Header, Content, Card, CardItem, Thumbnail, Text, Button, Icon, Left, Body, Right, Image } from 'native-base'; import Timestamp from 'react-timestamp'; import firebase from 'firebase' // import LocalizedStrings from 'react-native-localization' class PostRef extends Component{ constructor(props) { super(props); this.state = { open:false, star:'', profile_image:'', postOpen:false, }; } onCommentsPress = () => this.setState({open:true}) render() { return ( <Card> <CardItem> <Left> <Thumbnail source={this.props.profile_image} /> <Body> <Text>{this.props.post.author}</Text> <Text note><Timestamp time={this.props.post.timestamp/1000} component={Text} /></Text> </Body> </Left> </CardItem> <CardItem> <Body> <Image source={this.props.post.post_image} style={{height: 20, width: 20, flex: 1}}/> <Text> {this.props.post.body} </Text> </Body> </CardItem> <CardItem> <Left> <Button transparent textStyle={{color: '#FFA000'}} onPress={this.onCommentsPress}> <Icon active name="comment" /> <Text>Comments</Text> </Button> </Left> </CardItem> { (this.state.open===true) ? <CardItem> Comments goes here </CardItem> : <CardItem> There is no comment </CardItem> } </Card> ); } } export default PostRef AppRegistry.registerComponent('PostRef', () => PostRef);
MOTOMUR

2018/01/26 09:50

今までこのようなログが出なかったので、他に原因があるのかなと思いました。
januswel

2018/01/27 01:54

あ、ごめんなさい エラーログちゃんとみていませんでした JSX 部分で子コンポーネントに undefined が指定されているところがあるよ、ということみたいですね `props` の下に undefined のものがあるようです - this.props.post.author - this.props.post.body どちらかですね
MOTOMUR

2018/01/27 06:09

色々デバックして見た結果。<Image>のuriにはダウンロードURLは対応していなさそうだということがわかりました。 uriが引っかかって、このようなログが出てしまったようです。 ImageタグにどのようにダウンロードURLをsourceに入れたらいいですかね?
MOTOMUR

2018/01/27 12:40

どうしてダメなんだろうと色々考えたところ、react-nativeではなく、native-baseのimageを使用していたようです。 native-baseだと対応していないようですね。ありがとうございます!
MOTOMUR

2018/01/27 12:42

追記です。 native-baseにはimageがなかったです。勘違いしていました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問