<Image>と<TouchableHighlight>を<View>に配置すると、「React.Children.onlyは単一のReact要素の子を受け取ることが期待されます」エラーが発生します

ReactNativeコードに次の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要素の子を受け取ることが期待されています

エラー。TouchableHighlightコンポーネントを削除すると、正常に動作します。一方、Imageコンポーネントを削除しても、エラーが発生します。なぜこのエラーが発生するのかわかりません<View>。レンダリング用に複数のコンポーネントを内部に含めることができるはずです。
何か案は？

<TouchableHighlight>ちょうど一人の子供がいるに違いないようです。ドキュメントには、サポートする子は1つだけであり、複数の子をラップ<View>する必要があると記載されていますが、少なくとも（そしてほとんどの）子が1つ必要であるとは限りません。テキストや画像のない無地のボタンが欲しかったので、子を追加する必要はないと思いました。

これを示すためにドキュメントを更新しようとします。

<TouchableHighlight>要素は、エラーの原因です。<TouchableHighlight>要素が子要素を持っている必要があります。

次のようなコードを実行してみてください。

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}>
                <Text> This text is the target to be highlighted </Text>
            </TouchableHighlight>
        </View>
    );
}

はい、確かにあなたはあなたの中に一人の子供を持つ必要があります <TouchableHighlight>。

あなたとあなたのファイルを汚染したくない場合や、Viewsご使用は反応できるフラグメントを同じことを達成します。

<TouchableWithoutFeedback>
  <React.Fragment>
   ...
  </React.Fragment>
</TouchableWithoutFeedback>

またはさらに良いことに、ReactFragmentsの短い構文があります。したがって、上記のコードは次のように記述できます。

<TouchableWithoutFeedback>
  <>
   ...
  </>
</TouchableWithoutFeedback>

の下に子供が1人しかいない場合でも、同じエラーが発生しましたTouchableHighlight。問題は、他の何人かがコメントアウトしたが間違っていたということでした。適切にコメントアウトしていることを確認してください：http：//wesbos.com/react-jsx-comments/

この方法の直後TouchableWithoutFeedbackまたは<TouchableHighlight>挿入すると、<View>このエラーは発生しません。それでは、@ Pedramの回答または他の回答で十分に説明できるのはなぜですか。

通常、TochableHighlightで発生します。とにかくエラーは、どのコンポーネント内でも単一の要素を使用する必要があることを意味します。

解決策：親内で単一のビューを使用でき、そのビュー内で何でも使用できます。 添付の写真をご覧ください

ここに画像の説明を入力してください

1. <TouchableHighlight> 要素内に子を1つだけ含めることができます
2. 画像をインポートしたことを確認してください

私の場合、要素を1行下に置く必要がありました。

これはエラーをスローします：

export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}> {props.children}
  </TouchableWithoutFeedback>;
}

これはエラーをスローしませんが：

export function DismissKeyboard(props: IProps) {
  return <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}>
    {props.children}
  </TouchableWithoutFeedback>;
}