Reactjs React本机元素类型无效。应为字符串或类/函数，但未定义

你好，朋友们，我有一个react本地项目

这是我的侧边栏代码

 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，{useState，useffect}来自“React”
从“react native”导入{View、Text、StyleSheet、ScrollView、ImageBackground、Image、AsyncStorage、TouchableOpacity}
从“react navigation drawer”导入{DrawerNavigationItems as DrawerNavigationItems}
//从“/MainScreen”导入主屏幕
从“反应本机向量图标”导入{Ionicons}
从“反应本机向量图标”导入{Feather}
常量侧边栏屏幕=（道具）=>{
const[email，setEmail]=useState（'加载'）
const[name，setName]=useState（'loading'）
const[mobile，setMobile]=useState（'loading'）
const[isLoaded，setIsloaded]=useState（false）；
useffect（（）=>{
异步函数fetchData（）{
setIsloaded（真）
const token=await AsyncStorage.getItem（'token'）；
取（'http://127.0.0.1:3000',{
标题：新标题({
授权：'持有人'+代币
})
}).then（res=>res.json（））
。然后（数据=>{
setIsloaded（真）
console.log（数据）
setEmail（data.email）
setName（data.name）
setMobile（data.mobile）
})
}
fetchData（）；
}，[]）；//或[]如果效果不需要道具或状态
常量注销=（道具）=>{
//控制台日志（道具）；
AsyncStorage.removeItem（'token'）。然后（（）=>{
props.navigation.replace（'Login'）；
})
}
返回(
{name}
)
};
const styles=StyleSheet.create({
容器：{
弹性：1，
},
导航链接：{
为内容辩护：“中心”，
颜色：“灰色”，
重量：'800'，
尺寸：16，
宽度：50，
弹性：1，
marginLeft:30，
重量：'500'，
alignItems:“灵活启动”
},
简介：{
宽度：80，
身高：80，
边界半径：40，
边框宽度：3，
边框颜色：'#fff'
},
姓名：{
颜色：“fff”，
尺寸：20，
重量：'800'，
利润率：8
},
追随者：{
颜色：“rgba（255255,0.8）”，
尺寸：13，
marginRight:4
}
})
导出默认侧边栏屏幕；

这是我的报告尖叫，我正在导入侧边栏和所有链接

    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;

import React，{useffect，useState，Component}来自“React”；
从“react native”导入{文本、样式表、按钮、视图、TouchableOpacity、异步存储、ScrollView、SafeAreaView、图像、图像背景}；
从“反应本机向量图标”导入{FontAwesome5}
从“反应本机时间线平面列表”导入时间线
const ReportScreen=（道具）=>{
const[email，setEmail]=useState（'加载'）
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'）；
useffect（（）=>{
异步函数fetchData（）{
setIsloaded（真）
const token=await AsyncStorage.getItem（'token'）；
取（'http://127.0.0.1:3000',{
标题：新标题({
授权：'持有人'+代币
})
}).then（res=>res.json（））
。然后（数据=>{
setIsloaded（真）
//console.log（数据）
setEmail（data.email）
setName（data.name）
setMobile（data.mobile）
setU_id（data.u_id）
})
}
fetchData（）；
}, []); 
返回(
}
},
配置文件屏幕：{
屏幕：ProfileScreen，
导航选项：{
标题：“简介”，
抽屉图标：（{tintColor}）=>
}
},
消息屏幕：{
屏幕：MessageScreen，
导航选项：{
标题：“信息”，
抽屉图标：（{tintColor}）=>
}
},
活动屏幕：{
屏幕：活动屏幕，
导航选项：{
标题：“活动”，
抽屉图标：（{tintColor}）=>
}
},
列表屏幕：{
屏幕：列表屏幕，
导航选项：{
标题：“名单”，
抽屉图标：（{tintColor}）=>
}
},
统计屏幕：{
屏幕：统计屏幕，
导航选项：{
标题：“统计”，
抽屉图标：（{tintColor}）=>
}
},
标志屏幕：{
屏幕：标志屏幕，
导航选项：{
标题：“注销”，
抽屉图标：（{tintColor}）=>，
}
},
},
{
//contentComponent:props=>，
contentComponent：（道具）=>
,
//抽屉宽度：尺寸.get（'window'）。宽度=0.80，
抽屉宽度：数学最小值（高度、宽度）*0.8，
希德斯塔塔斯巴：错，
内容选项：{
activeBackgroundColor:“rgba（212118207,0.2）”，
activeTintColor:#531158“，
itemsContainerStyle：{
玛金托普：16，
marginHorizontal:8
},
}
}
);
导出默认createAppContainer（抽屉驱动）；

---

问题是，当我删除Imagebackground时，第一个错误消失了，但第二个错误出现了。请检查DroperNavigators的渲染方法。当我删除DroperNavigators时，错误消失了。但是我想让布局显示抽屉和imagebackground，请问有什么帮助吗

您是否尝试将返回的scrollview放入scrollview代码中，或者在scrollview中尝试相同的代码，如下所示：代码。也可以检查侧边栏屏幕的导入。仍然显示相同的错误。您可以只放入导入语句吗？比如你在哪里使用这个组件，导入语法看起来怎么样

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