열심히 구글링도 하면서 연습중인데 오류가 떴는데 원인을 모르겠네요....
왼쪽 drawerLayoutAdroid에 sectionList를 입히고 싶어서 해봤는데 호이스팅 문제일까요...
작성한 코드 및 에러 메세지
import React, { useRef } from 'react';
import {useState, useEffect} from 'react';
import {SafeAreaView, StyleSheet, DrawerLayoutAndroid, TouchableOpacity, Text, ScrollView, View} from 'react-native';
import {Button, TextInput, SectionList} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import StackNavigator from '../navigation/StackNavigator';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {StatusBar} from 'react-native';
export default function Post({navigation}){
const drawer = useRef(null);
const [drawerPosition, setDrawerPosition] = useState("left")
const DATA = [
{
title : "a", data : ["a", "aa"]
},
{
title : "b", data : ["b", "bb"]
},
{
title : "c", data : ["c", "cc"]
},
{
title : "d", data : ["d", "dd"]
}]
const Item = ({title}) => {
<View style = {styles.item}>
<Text style = {styles.title}>{title}</Text>
</View>
}
const navigationView = () => {
<View style = {styles.navigationContainer}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Item title={item} />}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
/>
</View>
;
}
return(
<DrawerLayoutAndroid
ref={drawer}
drawerWidth={150}
drawerPosition={drawerPosition}
renderNavigationView={navigationView}
>
<View style = {styles.mainContainer}>
<View style = {styles.container01}>
</View>
<View style = {styles.container02}>
<View style = {styles.container021}>
<TouchableOpacity onPress= {()=> drawer.current.openDrawer()}>
<Text>Menu</Text>
</TouchableOpacity>
</View>
<View style = {styles.container022}>
<Text style = {TextInput}/>
</View>
</View>
<View style = {styles.container03}>
</View>
<View style = {styles.container04}>
<Text>footer</Text>
</View>
</View>
</DrawerLayoutAndroid>
)
}
*오류
Warning: Failed %s type: %s%s, prop, Invalid props.style key `$$typeof` supplied to `Text`.
Bad object: {
"propTypes": {},
"State": {}
}
Valid keys: [
"display",
"width",
"height",
"start",
"end",
"top",
"left",
"right",
"bottom",
"minWidth",
"maxWidth",
"minHeight",
"maxHeight",
"margin",
"marginVertical",
"marginHorizontal",
"marginTop",
"marginBottom",
"marginLeft",
"marginRight",
"marginStart",
"marginEnd",
"padding",
"paddingVertical",
"paddingHorizontal",
"paddingTop",
"paddingBottom",
"paddingLeft",
"paddingRight",
"paddingStart",
"paddingEnd",
"borderWidth",
"borderTopWidth",
"borderStartWidth",
"borderEndWidth",
"borderRightWidth",
"borderBottomWidth",
"borderLeftWidth",
"position",
"flexDirection",
"flexWrap",
"justifyContent",
"alignItems",
"alignSelf",
"alignContent",
"overflow",
"flex",
"flexGrow",
"flexShrink",
"flexBasis",
"aspectRatio",
"zIndex",
"direction",
"shadowColor",
"shadowOffset",
"shadowOpacity",
"shadowRadius",
"transform",
"transformMatrix",
"decomposedMatrix",
"scaleX",
"scaleY",
"rotation",
"translateX",
"translateY",
"backfaceVisibility",
"backgroundColor",
"borderColor",
"borderTopColor",
"borderRightColor",
"borderBottomColor",
"borderLeftColor",
"borderStartColor",
"borderEndColor",
"borderRadius",
"borderTopLeftRadius",
"borderTopRightRadius",
"borderTopStartRadius",
"borderTopEndRadius",
"borderBottomLeftRadius",
"borderBottomRightRadius",
"borderBottomStartRadius",
"borderBottomEndRadius",
"borderStyle",
"opacity",
"elevation",
"color",
"fontFamily",
"fontSize",
"fontStyle",
"fontWeight",
"fontVariant",
"textShadowOffset",
"textShadowRadius",
"textShadowColor",
"letterSpacing",
"lineHeight",
"textAlign",
"textAlignVertical",
"includeFontPadding",
"textDecorationLine",
"textDecorationStyle",
"textDecorationColor",
"textTransform",
"writingDirection"
],
in Post (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View (created by CardContainer)
in RCTView (created by View)
in View
in CardSheet (created by Card)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Card)
in RCTView (created by View)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Screen)
in MaybeFreeze (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in RCTView (created by View)
in View (created by Background)
in Background (created by CardStack)
in CardStack (created by HeaderShownContext)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by StackView)
in GestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by StackView)
in StackView (created by StackNavigator)
in Unknown (created by StackNavigator)
in StackNavigator (created by StackNavigator)
in StackNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in App (created by ExpoRoot)
in ExpoRoot
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:4 in callFunctionReturnFlushedQueue
