首页  >  问答  >  正文

无法显示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>
P粉022723606P粉022723606456 天前543

全部回复(1)我来回复

  • P粉066224086

    P粉0662240862023-08-14 00:58:00

    函数Exam始终返回undefined,原因是forEach返回undefined。

    解决方法:使用map而不是forEach。

    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.map((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
    

    回复
    0
  • 取消回复