ContentComponents не работает в реагировать родной

Question

Я пытаюсь отобразить изображение и имя профиля бокового экрана на экране навигации (MainScreen), импортировав боковой экран в MainScreen, но на главном экране не отображается содержимое экрана боковой панели

, вот My SidebarScreen

import React from 'react'
import {View,Text,StyleSheet,ScrollView,ImageBackground,Image} from 'react-native'
import {DrawerNavigationItems} from 'react-navigation-drawer'
// import MainScreen from './MainScreen'
import {Ionicons} from '@expo/vector-icons'

export default SidebarScreen = props =>{
    <ScrollView style={{marginTop:60}}>
        <ImageBackground
        source = {require("../../assets/screenback.jpg")}
        style={{width:undefined,padding:16,paddingTop:48}}
        >
        <Image source={require("../../assets/profile.png")} style={styles.profile} />
        <Text style={styles.name}>Satya Jeet</Text>

        <View style={{flexDirection: 'row'}}>
        <Text style={styles.follower}>734 Followers</Text>
        <Ionicons name= "md-people" size={16} color="rgba(255,255,255,0.8)"/>
        </View>
        </ImageBackground>
        <View style={styles.container}>

        </View>
    </ScrollView>
}

const styles = StyleSheet.create({

    container:{
        flex:1,
    },
    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
    }

})

и вот мой MainScreen

import React,{Component} from 'react'

import { createAppContainer } from 'react-navigation'
import {createDrawerNavigator} from 'react-navigation-drawer'
import {Dimensions} from 'react-native'
// import SidebarScreen from './SidebarScreen'
import {Feather} from '@expo/vector-icons'

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

import SidebarScreen from './SidebarScreen'

class MainScreen extends Component{
  render(){
    return(
      <MyApp/>
    )
  }
}
const DrawerNavigator = createDrawerNavigator({

    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} />
        }
    },
    ReportScreen:{
        screen: ReportScreen,
        navigationOptions:{
            title:"Report",
            drawerIcon:({tintColor})=><Feather name="trending-up" 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} />
        }
    },
},

  {
    contentComponents:SidebarScreen,

    // drawerWidth:Dimensions.get('window').width = 0.80,
    hideStatusBar: true,
    contentOptions:{
        activeBackgroundColor:"rgba(212,118,207,0.2)",
        activeTintColor:"#531158",
        itemsContainerStyle:{
            marginTop:16,
            marginHorizontal:8
        }
    }
  }

);

const MyApp = createAppContainer(DrawerNavigator);


export default MainScreen;

// export default createAppContainer(DrawerNavigator);

здесь, на MainScreen, содержимое SidebarScreen не отображается, хотя я добавил его в contentComponents

Answer 1

Просто хочу напомнить, что это contentComponent: SidebarScreen. Проверьте это, если оно работает или нет:).