React Native错误失败的道具类型：提供给`Overlay`的`array`类型的无效道具`children`，答案

【问题标题】：React Native error Failed prop type: Invalid prop `children` of type `array` supplied to `Overlay`,React Native错误失败的道具类型：提供给`Overlay`的`array`类型的无效道具`children`，
【发布时间】：2021-04-03 12:37:41
【问题描述】：

我是 React Native 新手，打开一个组件时出现错误消息。这不会避免继续导航，但我想清除它。我很确定这是语法或拼写错误，但找不到它的出处。

在我的组件中，我有一个模式，一旦单击按钮就会调用一个函数。

这是组件的代码：

import { connect } from "react-redux";
import React, { useEffect, useState } from "react";
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  TouchableOpacity,
} from "react-native";
import { Card, Button, Overlay } from "react-native-elements";

import AsyncStorage from "@react-native-async-storage/async-storage";

import { PRIVATE_URL } from "../config";


function SettingsScreen({ setReduxUser, user }) {
  const [visible, setVisible] = useState(false);

  const toggleOverlay = () => {
    setVisible(!visible);
  };

  const handleLogOut = async () => {
    await fetch(`${PRIVATE_URL}/logout?token=${user.token}`);
    AsyncStorage.removeItem("userToken");
    setReduxUser({ id: null, pseudo: null, token: null });
  };

  const handleDeleteUser = async () => {
    await fetch(`${PRIVATE_URL}/delete-user?id=${user.id}`);
    AsyncStorage.removeItem("userToken");
    setReduxUser({ id: null, pseudo: null, token: null });
  };

  return (
    <View>
      <ScrollView>

        <Card containerStyle={{ borderRadius: 5, borderColor: "#abd6d3" }}>
          <View>
            <Button
              type="clear"
              titleStyle={{ color: "black" }}
              title="Déconnexion"
              onPress={() => handleLogOut()}
            />
          </View>
        </Card>
        

           <View
          style={{
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <TouchableOpacity onPress={toggleOverlay}>
            <Text
              style={{
                color: "#eb4d4b",
              }}
            >
              Supprimer mon compte
            </Text>
          </TouchableOpacity>
          <Overlay
            isVisible={visible}
            onBackdropPress={toggleOverlay}
            overlayStyle={{
              borderRadius: 5,
              width: "94%",
              height: "25%",
              justifyContent: "space-between",
              borderWidth: 1,
              borderColor: "#418581",
            }}
          >
            <Text>
              Êtes-vous sur de vouloir supprimer votre compte ?
            </Text>
            <Button
              type="clear"
              titleStyle={{ color: "#418581" }}
              title="Non, je veux continuer à déjeuner"
              onPress={toggleOverlay}
            />
            <Button
              type="clear"
              titleStyle={{ color: "#eb4d4b", fontSize: 14 }}
              title="Oui, j'ai pris ma décision"
              onPress={() => handleDeleteUser()}
            />
          </Overlay>
        </View>
      </ScrollView>
    </View>
  );
}

function mapDispatchToProps(dispatch) {
  return {
    setReduxUser: function (user) {
      dispatch({ type: "user", user });
    },
  };
}

function mapStateToProps(state) {
  return { user: state.user };
}

export default connect(mapStateToProps, mapDispatchToProps)(SettingsScreen);

【问题讨论】：

标签： javascript reactjs react-native components

【解决方案1】：

您需要将<Overlay> 中的元素包装到一个容器中，这样它就只有一个父元素，而不是一个元素数组。

           <Overlay
            isVisible={visible}
            onBackdropPress={toggleOverlay}
            overlayStyle={{
              borderRadius: 5,
              width: "94%",
              height: "25%",
              justifyContent: "space-between",
              borderWidth: 1,
              borderColor: "#418581",
            }}
          >
           //WRAP CONTAINER HERE
            <Text>
              Êtes-vous sur de vouloir supprimer votre compte ?
            </Text>
            <Button
              type="clear"
              titleStyle={{ color: "#418581" }}
              title="Non, je veux continuer à déjeuner"
              onPress={toggleOverlay}
            />
            <Button
              type="clear"
              titleStyle={{ color: "#eb4d4b", fontSize: 14 }}
              title="Oui, j'ai pris ma décision"
              onPress={() => handleDeleteUser()}
            />
           //WRAP CONTAINER HERE
          </Overlay>

您的容器可能只是<View>...</View>

【讨论】：