无法显示React Native Expo自定义组件
P粉022723606
P粉022723606 2023-08-13 09:58:33
[React讨论组]

我是一个新手,无法弄清楚为什么我的一个自定义组件显示出来了,而另一个没有。

主屏幕:

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

时钟显示出来了,但考试没有显示出来。

考试组件:

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

(注意:我的第一个对象ID是1,而不是零,因此在键值上减1)

我使用上下文来处理全局可用性,以确定从另一个屏幕的列表中选择了哪些考试。

当您从列表中选择考试时,console.log(examData[key-1].title);语句确实将正确的信息输出到终端,但是除了时钟之外,应用程序中没有显示任何内容。

我尝试删除时钟组件,以防它将列表推出页面。

有人知道我做错了什么吗...

P粉022723606
P粉022723606

全部回复(1)
P粉066224086

函数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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号