无法显示React Native Expo自定义组件
<p>我是一个新手,无法弄清楚为什么我的一个自定义组件显示出来了,而另一个没有。</p>
<p>主屏幕:</p>
<pre class="brush:php;toolbar:false;">import React from 'react';
import {View, Text} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import { DrawerActions } from '@react-navigation/native';
import Ionicons from '@expo/vector-icons/Ionicons';
import { useGrid } from '../context/gridProvider'; // 上下文提供者
import Exam from '../components/Exam';
import Clock from '../components/clock';
const Home = ({navigation}) => {
const {checkedItems, setCheckedItmes} = useGrid()
return (
<SafeAreaView style={{flex:1}}>
<ScrollView style={{padding:20}}>
<View style={{flexDirection: 'row', justifyContent: 'space-between', marginBottom:20,}}>
<Text style={{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>
</View>
<Clock /> // 时钟显示出来了
<Exam /> // 考试列表没有显示出来
</ScrollView>
</SafeAreaView>
)
}
export default Home</pre>
<p>时钟显示出来了,但考试没有显示出来。</p>
<p>考试组件:</p>
<pre class="brush:php;toolbar:false;">import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import { useGrid } from '../context/gridProvider';
import examData from '../data/trialData';
const Exam = () => {
const {checkedItems, setCheckedItmes} = useGrid();
checkedItems.forEach((key) => {
console.log(examData[key-1].title);
return(
<View style={{flex:1, alignItems: 'center', marginTop: 100, flexDirection: 'row'}}>
<Text style={{color: '#333'}}>{examData[key-1].title}</Text>
<Text>{examData[key-1].startTime}</Text>
<Text>{examData[key-1].endTime}</Text>
</View>
)
});
}
export default Exam</pre>
<p>(注意:我的第一个对象ID是1,而不是零,因此在键值上减1)</p>
<p>我使用上下文来处理全局可用性,以确定从另一个屏幕的列表中选择了哪些考试。</p>
<p>当您从列表中选择考试时,<code>console.log(examData[key-1].title);</code>语句确实将正确的信息输出到终端,但是除了时钟之外,应用程序中没有显示任何内容。</p>
<p>我尝试删除时钟组件,以防它将列表推出页面。</p>
<p>有人知道我做错了什么吗...</p>