Блог

// это моя учетная запись screen.js где я создаю статический массив объектов, таких как учетные записи, я хочу создать карточку каждой учетной записи с информацией об учетной записи. я хочу, чтобы цвет фона был динамичным, поскольку я инициализировал каждый объект. я передаю массив реквизитов учетных записей в cards.js файл, в котором я возвращаю плоский список карточек

 import React, { useState } from "react";
import {
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import Cards from "../components/Cards";
export default function AccountsScreen() {
  const [accounts, setAccount] = useState([
    { id: 1, title: "Credit card", balance: 5000, backgroundColor: "green"},
    { id: 2, title: "Cash", balance: 10000, backgroundColor: "blue"},
    { id: 3, title: "Bank", balance: 15000, backgroundColor: "coral"},
    { id: 4, title: "Other", balance: 20000, backgroundColor: "pink"},
    { id:9939,title: "Add", },  
  ]);

  return (
    <View style={styles.container}>
      <View style={styles.headingContent}>
        <Text style={styles.heading}>Accounts</Text>
        <View style={styles.balanceContent}>
          <Text style={styles.heading}>Total: </Text>
          <Text style={styles.balance}>  Rs.70500</Text>
        </View>
      </View>
      <Cards accounts={accounts} />
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  headingContent: {
    marginTop: 10,
    paddingTop: 10,
    paddingHorizontal: 21,
    width: "100%",
    height: 50,
    flexDirection: "row",
   // backgroundColor: "#ddd",
    justifyContent: "space-between",
  },
  balanceContent: {
    flexDirection: "row",
  },
  heading: {
    color: "#333",
    fontWeight: "bold",
    fontSize: 16,
  },
  balance: {
    color: "green",
    fontWeight: "bold",
    fontSize: 16,
  },
});
  

//это iscard.js где я создаю плоский список для возврата карточек. теперь я хочу сделать цвет фона карты динамичным, который находится в реквизите, как я могу это сделать введите описание изображения здесь

 
import React from "react";
import { MaterialIcons } from "@expo/vector-icons";
import { render } from "react-dom";
import {
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

export default function Cards({ accounts }) {
 // console.log('start from here...');
  return (
    <View style={styles.accountsSection}>
      <FlatList
        numColumns={3}
        keyExtractor={(item) => item.id}
        style={styles.cardsSection}
        columnWrapperStyle={styles.row}
        data={accounts}
        renderItem={(item) => {
          if(item.item.title != "Add"){
           return <TouchableOpacity>
              <View style={styles.card}>
              <Text style={styles.cardbalance}>Rs.{item.item.balance}</Text>
                <Text style={styles.cardText}>{item.item.title}</Text>
              </View>
            </TouchableOpacity> 
            }
           else{
            return  <TouchableOpacity>
              <View style={styles.addAccount}>
               <MaterialIcons name="add" size={38} color="#897d7d"/>
                <Text style={styles.addAccountText}>{item.item.title} an account</Text>
              </View> 
            </TouchableOpacity>
          } 
        }}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  accountsSection: {
    flexDirection: "row",
  },
  cardsSection: {
  },

  card: {
    backgroundColor: "#95BF47",
    margin:10,
    width: 100,
    height: 110,
    alignItems: "center",
    justifyContent: 'center',
    borderRadius: 10,
    elevation: 5,
    shadowOffset: {
      width: 1,
      height: 1,
    },
    shadowColor: "#333",
    shadowOpacity: 0.3,
    shadowRadius: 2,
    
  },
  cardText: {
    color: "#fff",
    fontWeight: "bold",
  },
  cardbalance: {
    color: "#fff",
    fontWeight: "bold",
    fontSize: 18,
  },
  addAccount:{
    margin: 10,
    width: 100,
    height: 110,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 10,
    borderWidth:1,
    borderStyle:'dashed',
    borderColor:'black',
  },
  addAccountText:{
    color: '#897d7d',
    fontWeight: "bold",
    fontSize: 12,
  },
  row: {
    justifyContent:'center',
    //marginTop:10,
   
  }
});


  

Вам просто нужно обновить строку ниже

 import React from "react";
import { MaterialIcons } from "@expo/vector-icons";
import { render } from "react-dom";
import {
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

export default function Cards({ accounts }) {
 // console.log('start from here...');
  return (
    <View style={styles.accountsSection}>
      <FlatList
        numColumns={3}
        keyExtractor={(item) => item.id}
        style={styles.cardsSection}
        columnWrapperStyle={styles.row}
        data={accounts}
        renderItem={(item) => {
          if(item.item.title != "Add"){
           return <TouchableOpacity>

             // Just update below line
              <View style={[styles.card, { backgroundColor: item.item.backgroundColor }]}>
              <Text style={styles.cardbalance}>Rs.{item.item.balance}</Text>
                <Text style={styles.cardText}>{item.item.title}</Text>
              </View>
            </TouchableOpacity> 
            }
           else{
            return  <TouchableOpacity>
              <View style={[styles.addAccount, { backgroundColor: item.item.backgroundColor }]}>
               <MaterialIcons name="add" size={38} color="#897d7d"/>
                <Text style={styles.addAccountText}>{item.item.title} an account</Text>
              </View> 
            </TouchableOpacity>
          } 
        }}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  accountsSection: {
    flexDirection: "row",
  },
  cardsSection: {
  },

  card: {
    backgroundColor: "#95BF47",
    margin:10,
    width: 100,
    height: 110,
    alignItems: "center",
    justifyContent: 'center',
    borderRadius: 10,
    elevation: 5,
    shadowOffset: {
      width: 1,
      height: 1,
    },
    shadowColor: "#333",
    shadowOpacity: 0.3,
    shadowRadius: 2,
    
  },
  cardText: {
    color: "#fff",
    fontWeight: "bold",
  },
  cardbalance: {
    color: "#fff",
    fontWeight: "bold",
    fontSize: 18,
  },
  addAccount:{
    margin: 10,
    width: 100,
    height: 110,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 10,
    borderWidth:1,
    borderStyle:'dashed',
    borderColor:'black',
  },
  addAccountText:{
    color: '#897d7d',
    fontWeight: "bold",
    fontSize: 12,
  },
  row: {
    justifyContent:'center',
    //marginTop:10,
   
  }
});

  

Я рекомендую вам использовать модуль ‘classnames’. Это действительно просто и полезно. Я использую его в своем RN и React.js проекты.

https://www.npmjs.com/package/classnames

Пример :

 const [open,setOpen]=useState(false);

const barClass = cx(s.bar, {
[s['bar--active']]: open,
  

});