1. ホーム
  2. javascript

[解決済み】<Image>と<TouchableHighlight>を<View>に入れると「React.Children.only expected to receive a single React element child」エラーが発生する。

2022-02-16 13:18:32

質問

私のReact Nativeのコードに以下のようなrenderメソッドがあります。

render() {
    const {height, width} = Dimensions.get('window');
    return (
      <View style={styles.container}>
        <Image 
          style={{
            height:height,
            width:width,
          }}
          source={require('image!foo')}
          resizeMode='cover' 
        />
        <TouchableHighlight style={styles.button}/>
      </View>
    );
  }

こんなエラーが出ます。

React.Children.only React 要素の子要素を 1 つ受け取ることが期待される

を削除すると TouchableHighlight コンポーネントを使用すると、正常に動作します。Imageコンポーネントを削除しても、このエラーは発生します。

なぜこのようなエラーが出るのかがわかりません。 <View> は、レンダリングのためにその中に複数のコンポーネントを持つことができるはずです。

解決方法は?

どうやら <TouchableHighlight> は正確に1つの子を持たなければなりません。ドキュメントによると、子プロセスは1つしかサポートせず、2つ以上は <View> しかし、少なくとも(そして最大でも)1つの子を持たなければならないということはありません。私はただテキストや画像のない無地のボタンを置きたかっただけなので、子要素を追加する必要はないと判断しました。

ドキュメントを更新して、このことを示すようにします。