“React.Children.chỉ mong đợi nhận được một lỗi phần tử React con” khi đặt <Image> và <TouchableHighlight> trong một <View>

Tôi có phương thức hiển thị sau trong mã React Native của mình:

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>
    );
  }

Nó cho tôi một

React.Children.chỉ mong đợi nhận được một phần tử con React duy nhất

lỗi. Nếu tôi loại bỏ TouchableHighlightthành phần, nó hoạt động tốt. Mặt khác, nếu tôi loại bỏ thành phần Hình ảnh, nó vẫn cho lỗi đó. Tôi không thể hiểu tại sao nó lại xuất hiện lỗi này và <View>có thể có nhiều thành phần bên trong nó để hiển thị.
Có ý kiến ​​gì không?

Có vẻ như <TouchableHighlight>phải có đúng một đứa trẻ. Các tài liệu nói rằng nó chỉ hỗ trợ một con và nhiều hơn một con phải được bao bọc trong một <View>, nhưng không phải nó phải có ít nhất (và nhiều nhất) một con. Tôi chỉ muốn có một nút màu trơn không có văn bản / hình ảnh, vì vậy tôi không cần thiết phải thêm một nút con.

Tôi sẽ cố gắng cập nhật tài liệu để chỉ ra điều này.

Phần <TouchableHighlight>tử là nguồn gốc của lỗi. Phần <TouchableHighlight>tử phải có phần tử con .

Hãy thử chạy mã như sau:

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>
    );
}

Vâng, thực sự bạn cần phải có một đứa trẻ bên trong của bạn <TouchableHighlight>.

Và, nếu bạn không muốn làm ô nhiễm tệp của mình, Viewsbạn có thể sử dụng React Fragment để đạt được điều tương tự.

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

hoặc tốt hơn nữa là có một cú pháp ngắn cho React Fragment. Vì vậy, đoạn mã trên có thể được viết như sau:

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

Tôi đã mắc phải lỗi tương tự, ngay cả khi tôi chỉ có một đứa con dưới quyền TouchableHighlight. Vấn đề là tôi đã có một số người khác nhận xét nhưng không chính xác. Đảm bảo rằng bạn đang bình luận một cách thích hợp: http://wesbos.com/react-jsx-comments/

chỉ sau TouchableWithoutFeedbackhoặc <TouchableHighlight>chèn <View>theo cách này bạn sẽ không gặp lỗi này. tại sao đó là câu trả lời @Pedram hoặc các câu trả lời khác giải thích đủ.

Thông thường nó xảy ra trong TochableHighlight. Dù sao lỗi có nghĩa là bạn phải sử dụng một phần tử bên trong bất kỳ thành phần nào.

Giải pháp: Bạn có thể sử dụng chế độ xem đơn bên trong chế độ xem gốc và bất kỳ thứ gì có thể được sử dụng bên trong Chế độ xem đó. Xem hình đính kèm

nhập mô tả hình ảnh ở đây

1. <TouchableHighlight> phần tử chỉ có thể có một con bên trong
2. Đảm bảo rằng bạn đã nhập Hình ảnh

Trong trường hợp của tôi, tôi chỉ cần đặt phần tử xuống một dòng:

Điều này tạo ra một lỗi:

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

Mặc dù điều này không gây ra lỗi:

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