reactjs - React 本机元素类型无效。需要一个字符串或类/函数，但未定义

Question

你好朋友我有一个反应原生项目，它显示

这是我的侧边栏屏幕代码

 import React,{useState,useEffect} from 'react'
    import {View,Text,StyleSheet,ScrollView,ImageBackground,Image,AsyncStorage,TouchableOpacity} from 'react-native'
    import {DrawerNavigatorItems as DrawerNavigatorItems} from 'react-navigation-drawer'
    // import MainScreen from './MainScreen'
    import {Ionicons} from 'react-native-vector-icons'
    import {Feather} from 'react-native-vector-icons'

    const SidebarScreen = (props) =>{

    const [email,setEmail] = useState('loading')
    const [name,setName] = useState('loading')
    const [mobile,setMobile] = useState('loading')
    const [isLoaded,setIsloaded] = useState(false);

      useEffect(() => {
        async function fetchData() {
         setIsloaded(true)
        const token = await AsyncStorage.getItem('token');

        fetch('http://127.0.0.1:3000',{
            headers:new Headers({
                Authorization:'Bearer '+token
            })
        }).then(res=>res.json())
        .then(data=>{
          setIsloaded(true)
            console.log(data)
            setEmail(data.email)
            setName(data.name)
            setMobile(data.mobile)
        })
        }
        fetchData();
      }, []); // Or [] if effect doesn't need props or state

      const logout = (props) =>{

         // console.log(props);
         AsyncStorage.removeItem('token').then(()=>{
          props.navigation.replace('Login');
         })
      }


 return(
  <ScrollView style={{backgroundColor: '#ffff'}}>
        <ImageBackground
        source = {require("../../assets/screenback.jpg")}
        style={{width:100,padding:16,paddingTop:48}}
        >
        <Image source={require("../../assets/profile.png")} style={styles.profile} />
        <Text style={styles.name}>{name}</Text>

        <View style={{flexDirection: 'row'}}>
        <Ionicons name= "md-people" size={16} color="rgba(255,255,255,0.8)"/>
        </View>
        </ImageBackground>
        <View style={styles.container}>
        <DrawerNavigatorItems {...props}/>
        </View>
    </ScrollView>
    )
};

const styles = StyleSheet.create({

    container:{
        flex:1,
    },
    navlink:{
        justifyContent: 'center',
        color:"gray",
        fontWeight: '800',
        fontSize: 16,
        width: 50,
        flex:1,
        marginLeft: 30,
        fontWeight:'500', 
        alignItems: 'flex-start' 
    },
    profile:{
        width:80,
        height:80,
        borderRadius: 40,
        borderWidth: 3,
        borderColor: '#fff'
    },
    name:{
        color:"#fff",
        fontSize: 20,
        fontWeight: '800',
        marginVertical: 8 
    },
    followers:{
        color:"rgba(255,255,255,0.8)",
        fontSize: 13,
        marginRight: 4
    }

})


export default SidebarScreen;

这是我要导入侧边栏和所有链接的报告屏幕

    import React,{useEffect,useState,Component} from "react";
import { Text, StyleSheet,Button,View,TouchableOpacity,AsyncStorage,ScrollView,SafeAreaView,Image,ImageBackground} from "react-native";
import {FontAwesome5} from 'react-native-vector-icons'
import Timeline from 'react-native-timeline-flatlist'

const ReportScreen = (props) => {

   const [email,setEmail] = useState('loading')
   const [name,setName] = useState('loading')
   const [mobile,setMobile] = useState('loading')
   const [u_id,setU_id] = useState('')
   const [isLoaded,setIsloaded] = useState(false);
   const [state,setState] = useState({selected: null});

   const im1 = require('../../assets/43/1.png');

   useEffect(() => {
        async function fetchData() {
         setIsloaded(true)
        const token = await AsyncStorage.getItem('token');
        fetch('http://127.0.0.1:3000',{
            headers:new Headers({
                Authorization:'Bearer '+token
            })
        }).then(res=>res.json())
        .then(data=>{
          setIsloaded(true)
            // console.log(data)
            setEmail(data.email)
            setName(data.name)
            setMobile(data.mobile)
            setU_id(data.u_id)
        })
        }
        fetchData();
      }, []); 




  return (

     <View style={styles.container1} contentInsetAdjustmentBehavior="automatic">

        <SafeAreaView style={{flex:1,marginTop:0}}>

        <View style={{flex:1,flexDirection:'row',justifyContent:'center'}}>
        </View>
        </SafeAreaView
      </View>
    );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 30
  },
  imageContainer:{
    flex: 1,
    // remove width and height to override fixed static size
    width: null,
    height: null,
    marginTop: 0
  },
  mainView:{
    flex:1,
    marginTop:35,
    alignItems: 'center',
    justifyContent:'center'  
  },
  container1:{
    flex:1,
    marginTop:20,
  },
   header:{
    backgroundColor: "#f3a0d9",
    height:200,
    overflow: 'hidden',
    position: 'relative',
    zIndex: 0,
    width:500
    // zIndex:0
  },

});

export default ReportScreen;

这是我要导入 SidebarScreen 的 MainScreen

    import React,{Component} from 'react'

import { createAppContainer } from 'react-navigation'
import {createDrawerNavigator} from 'react-navigation-drawer'
import {Dimensions,View,Text,ScrollView} from 'react-native'
import {Feather} from 'react-native-vector-icons'
const { width, height } = Dimensions.get('screen');

import {
    ProfileScreen,
    MessageScreen,
    ActivityScreen,
    ListScreen,
    ReportScreen,
    StatisticScreen,
    SignOutScreen,
} from "./Index"

import SidebarScreen from './SidebarScreen'

const DrawerNavigator = createDrawerNavigator({
    ReportScreen:{
        screen: ReportScreen,
        navigationOptions:{
            title:"Report",
            drawerIcon:({tintColor})=><Feather name="trending-up" size={16} color={tintColor} />
        }
    },
    ProfileScreen:{
        screen: ProfileScreen,
        navigationOptions:{
            title:"Profile",

            drawerIcon:({tintColor})=><Feather name="user" size={16} color={tintColor} />
        }
    },

    MessageScreen:{
        screen: MessageScreen,
        navigationOptions:{
            title:"Message",
            drawerIcon:({tintColor})=><Feather name="message-square" size={16} color={tintColor} />
        }
    },
    ActivityScreen:{
        screen: ActivityScreen,
        navigationOptions:{
            title:"Activity",
            drawerIcon:({tintColor})=><Feather name="activity" size={16} color={tintColor} />
        }
    },
    ListScreen:{
        screen: ListScreen,
        navigationOptions:{
            title:"List",
            drawerIcon:({tintColor})=><Feather name="list" size={16} color={tintColor} />
        }
    },

    StatisticScreen:{
        screen: StatisticScreen,
        navigationOptions:{
            title:"Statistic",
            drawerIcon:({tintColor})=><Feather name="bar-chart" size={16} color={tintColor} />
        }
    },
    SignOutScreen:{
        screen: SignOutScreen,
        navigationOptions:{
            title:"SignOut",
            drawerIcon:({tintColor})=><Feather name="log-out" size={16} color={tintColor} />,
        }
    },
},

  {
    //contentComponent:props => <SidebarScreen {...props} />, 
    contentComponent: (props) =>
<View style={{flex: 1}}>
<ScrollView>
<SidebarScreen {...props} />
</ScrollView>
</View>,
    // drawerWidth:Dimensions.get('window').width = 0.80,
    drawerWidth: Math.min(height, width) * 0.8,
    hideStatusBar: false,
    contentOptions:{
        activeBackgroundColor:"rgba(212,118,207,0.2)",
        activeTintColor:"#531158",
        itemsContainerStyle:{
            marginTop:16,
            marginHorizontal:8
        },

    }
  }

);

 export default createAppContainer(DrawerNavigator);

问题是，当我删除 Imagebackground 时，第一个错误消失了，但随后出现第二个错误，检查 DrawerNavigators 的渲染方法。当我删除 DrawerNavigatorItems 时，错误消失了。但我希望布局与抽屉和图像背景一起显示，请提供任何帮助

标签： reactjsreact-native