[react-native] <View>에 <Image> 및 <TouchableHighlight>를 넣을 때 “React.Children.only는 단일 React 요소 자식을 수신해야합니다.”오류

Program / 글쓴이

내 React Native 코드에 다음과 같은 렌더링 방법이 있습니다.

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구성 요소를 제거하면 제대로 작동합니다. 반면에 이미지 구성 요소를 제거해도 여전히 오류가 발생합니다. 이 오류가 발생하는 이유를 알 수 없으며 <View>렌더링을 위해 내부에 둘 이상의 구성 요소를 가질 수 있어야합니다.
어떤 아이디어?

답변

<TouchableHighlight>정확히 한 명의 아이 가 있어야하는 것 같습니다 . 문서에 따르면 하나의 자식 만 지원하고 둘 이상은에 래핑되어야 <View>하지만 적어도 하나의 자식이 있어야한다는 것은 아닙니다. 텍스트 / 이미지가없는 일반 색상의 버튼을 원했기 때문에 아이를 추가 할 필요가 없다고 생각했습니다.

이를 나타 내기 위해 문서를 업데이트하려고합니다.

답변

<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>.

그리고 파일을 오염시키지 않으려면 ViewsReact Fragments 를 사용 하여 동일한 결과를 얻을 수 있습니다 .

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

또는 React Fragments에 대한 짧은 구문 이 있습니다. 따라서 위 코드는 다음과 같이 작성할 수 있습니다.

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

답변

.NET Framework 아래에 한 명의 자녀 만있는 경우에도 동일한 오류가 발생했습니다 TouchableHighlight. 문제는 다른 사람들이 잘못 주석을 달았다는 것입니다. 적절하게 주석을 달고 있는지 확인하십시오. http://wesbos.com/react-jsx-comments/

답변

이 방법으로 바로 뒤에 TouchableWithoutFeedback또는 <TouchableHighlight>삽입 <View>하면이 오류가 발생하지 않습니다. 왜 @Pedram 답변 또는 다른 답변이 충분히 설명합니까?

답변

일반적으로 TochableHighlight에서 발생합니다. 어쨌든 오류 는 모든 구성 요소 내에서 단일 요소를 사용해야 함을 의미합니다 .

솔루션 : 부모 내부에서 단일 뷰를 사용할 수 있으며 해당 뷰 내부에서 모든 것을 사용할 수 있습니다. 첨부 된 사진 참조

여기에 이미지 설명 입력

답변

  1. <TouchableHighlight> 요소는 내부에 자식을 하나만 가질 수 있습니다.
  2. 이미지를 가져 왔는지 확인