Question

无法使用 React Native 将值从一个组件传递到另一个组件

2021-08-12

66

javascript react-native components

我尝试在 react-native 项目中将一个值传递给另一个组件，但是失败了，并且没有显示任何错误，但它完全显示了一个空白页！

NotificationData.js 页面，其中存储了所需的数据，如下所示，

const NotificationData =[
    {
        title: "Covid Visa",
        statusDetails: "Your antibody is about to expire in a month ",
        time: "3:55PM  10 May 2021",
    },
    {
        title: "UTTPS",
        statusDetails: "Your vaccine shedule is activated. Please come to center at 12 May.",
        time: "10:15PM  5 May 2021",
    },
    {
        title: "Government",
        statusDetails: "Please follow the rules to avoid COVID spread. Stay home and stay safe. ",
        time: "3:55PM  1 May 2021",
    },
    {
        title: "Kuet Moitri Hospital",
        statusDetails: "Congratulations! Your  PCR result is negative. This result is valid for next 48 hours.",
        time: "12:30PM  20 May 2021",
    },
];

export default NotificationData;

Notification.js 页面，我已在其中显示数据，

import React from "react";
import {View, StyleSheet} from "react-native";
import { Card } from "react-native-paper";
import NotificationData from "./NotificationData";


const Notification = () => {

return (
<View style={styles.container}>
          {
                    NotificationData.map((val, ind) =>{
                    return <Card 
                              key={ind} 
                              title={val.title}
                              statusDetails={val.statusDetails}
                              time={val.time}
                              />
                    })
          }
</View>
);
};

const styles = StyleSheet.create({
container: {
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
height: "100%",
width: "100%",
},
});

export default Notification;

注意： 它在附加文件中显示空白页。 提前感谢！

Answer 1

您可以像这样更新您的 Notification.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Card, Title, Paragraph } from 'react-native-paper';
import NotificationData from './NotificationData';

const Notification = () => {
  return (
    <View style={styles.container}>
      {NotificationData.map((val, ind) => {
        return (
          <Card style={{ flex: 1 }}>
            <Card.Content>
              <Title>{val.title}</Title>
              <Paragraph>{val.statusDetails}</Paragraph>
            </Card.Content>
          </Card>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
    width: '100%',
  },
});

export default Notification;