问通知屏幕

EN

import React from "react";
import { StyleSheet, Text, View, FlatList, Image } from "react-native";
import Header from "../components/Header";

export default function Notifications() {
  const data = [
    {
      id: "1",
      post_title: "Best practice",
      avatar: "../assets/avatar-placeholder.png",
      username: "Bilal Majeed",
      category: "Management",
      notification: "Liked your post",
      time: "Now",
    },
    {
      id: "2",
      post_title: "Best practice",
      avatar: "../assets/avatar-placeholder.png",
      username: "Amna Yasir",
      category: "Special Volunteer",
      notification: "shared your post ",
      time: "Now",
    },
    {
      id: "3",
      post_title: "Best practice",
      avatar: "../assets/avatar-placeholder.png",
      username: "Amna Yasir",
      category: "Special Volunteer",
      notification: "commented on your post",
      time: "5 min ago",
    },
    {
      id: "4",
      post_title: "Best practice",
      avatar: "../assets/avatar-placeholder.png",
      username: "Abbas S.",
      category: "Management",
      notification: "is now following you",
      time: "15 min ago",
    },
    {
      id: "5",
      post_title: "Best practice",
      avatar: "../assets/avatar-placeholder.png",
      username: "Abbas S.",
      category: "Management",
      notification: "like your post",
      time: "35 min ago",
    },
  ];

  return (
    <View>
      <View style={styles.container}>
        <Header title={"Notifications"} />
      </View>
      <FlatList
        data={data}
        keyExtractor={(item, index) => {
          return index.toString();
        }}
        renderItem={({ item }) => {
          return (
            <View style={styles.mainBody}>
              <View style={styles.singleNotification}>
                <Image
                  style={styles.avatar}
                  source={require("../assets/avatar-placeholder.png")}
                />
                <View style={styles.mainContent}>
                  <View style={styles.notificationHead}>
                    <Text style={styles.userName}>{item.username}</Text>
                    <Text style={styles.categoryText}>{item.category}</Text>
                    <Text style={styles.timeText}>{item.time}</Text>
                  </View>
                  <View>
                    <Text style={styles.notification}>{item.notification}</Text>
                  </View>
                </View>
              </View>
              <View style={styles.hairLine} />
            </View>
          );
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
  },
  mainBody: {
    alignContent: "center",
    alignItems: "center",
  },
  singleNotification: {
    paddingHorizontal: 9,
    flexDirection: "row",
    alignItems: "center",
    width: 330,
    height: 62,
    backgroundColor: "#fff",
    marginTop: 10,
  },
  avatar: {
    width: 35,
    height: 35,
    borderRadius: 35 / 2,
  },
  notificationHead: {
    flexDirection: "row",
    alignItems: "baseline",
    backgroundColor: "#eee",
  },
  userName: {
    fontFamily: "Roboto",
    fontSize: 14,
    fontWeight: "700",
    color: "#707070",
    marginLeft: 11,
    lineHeight: 18,
  },
  categoryText: {
    fontFamily: "Roboto",
    fontSize: 11,
    fontWeight: "400",
    color: "#4582C3",
    marginLeft: 11,
  },

  timeText: {
    position: "relative",
    right: 0,
    fontFamily: "Roboto",
    fontSize: 11,
    fontWeight: "400",
    color: "#707070",
    opacity: 0.7,
    marginLeft: 11,
    textAlign: "left",
  },
  notification: {
    fontFamily: "Roboto",
    fontSize: 12,
    fontWeight: "400",
    color: "#707070",
    marginLeft: 11,
    lineHeight: 18,
  },
  hairLine: {
    alignContent: "center",
    padding: 0,
    marginTop: 15,
    width: "100%",
    height: 2,
    opacity: 0.5,
    backgroundColor: "#eee",
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>