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

Posted 2023-02-23

【中文标题】React Native错误失败的道具类型：提供给`Overlay`的`array`类型的无效道具`children`，

【英文标题】：React Native error Failed prop type: Invalid prop `children` of type `array` supplied to `Overlay`,

【发布时间】：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);

【参考方案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>