React Native Expo 사용자 정의 구성 요소를 표시할 수 없습니다
P粉022723606
2023-08-13 09:58:33
<p>저는 초보자인데 왜 내 맞춤 구성 요소 중 하나는 표시되고 다른 하나는 표시되지 않는지 알 수 없습니다. </p>
<p>홈 화면: </p>
<pre class="brush:php;toolbar:false;">'react'에서 React를 가져옵니다.
'react-native'에서 {View, Text}를 가져옵니다.
'react-native-safe-area-context'에서 { SafeAreaView }를 가져옵니다.
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import { DrawerActions } from '@react-navigation/native';
'@expo/Vector-icons/Ionicons'에서 Ionicons를 가져옵니다.
import { useGrid } from '../context/gridProvider' // 컨텍스트 제공자
'../composites/Exam'에서 시험을 가져옵니다.
'../composites/clock'에서 시계를 가져옵니다.
const 홈 = ({탐색}) =>
const {checkedItems, setCheckedItmes} = useGrid()
반품 (
<SafeAreaView 스타일={{flex:1}}>
<ScrollView 스타일={{padding:20}}>
<보기 스타일={{flexDirection: 'row', justifyContent: 'space-between', marginBottom:20,}}>
<텍스트 스타일={{fontSize: 16,fontWeight: 700}}></Text>
<Text style={{fontSize: 32,fontWeight: 700, color:'#444'}}>오늘의 시험</Text>
<TouchableOpacity onPress={() => Navigation.dispatch(DrawerActions.openDrawer())}>
<Ionicons name="menu" size={32} color="#333" />
</TouchableOpacity>
</보기>
<시계 /> // 시계가 표시됩니다.
<시험 /> // 시험 목록이 표시되지 않습니다.
</ScrollView>
</SafeAreaView>
)
}
기본 홈 내보내기</pre>
<p>시계는 표시되지만 시험은 표시되지 않습니다.</p>
<p>시험 구성요소:</p>
<pre class="brush:php;toolbar:false;">'react'에서 React를 가져옵니다.
'react-native'에서 {View, Text, StyleSheet}를 가져옵니다.
import { useGrid } from '../context/gridProvider';
'../data/trialData'에서 ExamData를 가져옵니다.
const 시험 = () =>
const {checkedItems, setCheckedItmes} = useGrid();
checkItems.forEach((key) => {
console.log(examData[key-1].title);
반품(
<보기 스타일={{flex:1, alignItems: 'center', marginTop: 100, flexDirection: 'row'}}>
<텍스트 스타일={{color: '#333'}}>{examData[key-1].title}</Text>
<텍스트>{examData[key-1].startTime}</Text>
<텍스트>{examData[key-1].endTime}</Text>
</보기>
)
});
}
기본 시험 내보내기</pre>
<p> (참고: 첫 번째 개체 ID는 0이 아닌 1이므로 키 값에서 1을 뺍니다.) </p>
<p>다른 화면의 목록에서 어떤 시험이 선택되는지 결정하기 위해 컨텍스트를 사용하여 글로벌 가용성을 처리합니다. </p>
<p>목록에서 시험을 선택하면 <code>console.log(examData[key-1].title);</code> 명령문은 다음을 제외하고 터미널에 올바른 정보를 출력합니다. 그렇지 않으면 애플리케이션에 아무것도 표시되지 않습니다. </p>
<p>목록이 페이지 밖으로 밀려나는 것을 방지하기 위해 시계 구성 요소를 제거해 보았습니다. </p>
<p>제가 뭘 잘못했는지 아시는 분 계시나요...</p>
forEach가 정의되지 않은 값을 반환하기 때문에 Exam 함수는 항상 정의되지 않은 값을 반환합니다.
해결 방법: forEach 대신 맵을 사용하세요.
으아아아