FlatList nie widać ikon :: 4programmers.net

Rejestracja:prawie 4 lata
Ostatnio:około miesiąc
Postów:91

0

Chce stworzyć menu z kafelek ale mam problem z wyświetleniem grafiki. Pojawia mi się tekst title ale grafika już nie

Kopiuj

const link = require('../assets/logo.png');

const product = [
  {
    title: 'pierwszy',
    image: 'link'
  },
  {
    title: 'drugi',
    image: 'link'
  },
  {
    title: 'trzeci',
    image: 'link'
  },
  {
    title: 'cztery',
    image: 'link'
  }
];

function ServiceHandler() {
  () => navigation.navigate('Service')
}

function ServiceScreen() {

  const navigation = useNavigation();

  return (
    <BackgroundImage>
      <CustomHeader backButton={() => navigation.navigate('Home')} />
      <View style={styles.rootContainer}>
        <SafeAreaView >
        <FlatList 
          numColumns={3}
          data={product}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => (<Product product={item} />)}></FlatList>
          </SafeAreaView>
      </View>
    </BackgroundImage>
  );
}

I moja klasa produkty

Kopiuj

import React from "react";
import { View, Text, Image} from "react-native";

class Product extends React.Component {
    render(){
        const {title, image} = this.props.product
        return (
            <View style={{width:'48%', alignItems: 'center', borderWidth: 0.75, marginHorizontal:'1%', borderColor: 'white'}}>
                <Text>{title}</Text>
                <Image source={{image}}/>
            </View>
        )
    }
}

export default Product;

Xarviel

2022-09-20 16:37

Xarviel2022-09-20 16:37

Rejestracja:ponad 3 lata
Ostatnio:około 6 godzin
Postów:847

1

TakMaszRacje napisał(a):

Kopiuj

const link = require('../assets/logo.png');

const product = [
  {
    title: 'pierwszy',
    image: 'link'
  },
  {
    title: 'drugi',
    image: 'link'
  },
  {
    title: 'trzeci',
    image: 'link'
  },
  {
    title: 'cztery',
    image: 'link'
  }
];

Źle przekazujesz zmienną link do obiektu.

Spróbuj w taki sposób

Kopiuj

const link = require('../assets/logo.png');

const product = [
  {
    title: "Lorem ipsum",
    image: link
  }
];

edytowany 2x, ostatnio: Xarviel 2022-09-20 16:56

TakMaszRacje 2022-09-22 14:35

faktycznie to był na pewno jeden z błędów drugi to <Image source={{image}}/>.

Xarviel 2022-09-22 14:43

Na takie drobne literówki to przydaje się TypeScript, bo w obu przypadkach dostałbyś informacje, że typ zmiennej jest nieprawidlowy.

TakMaszRacje 2022-09-22 15:16

a możesz mi jeszcze podpowiedzieć jak zrobić aby można było zrobić ikonki aktywne. Chce żeby po naciśnięciu danej ikonki dodawał mi się do list ten produkt np po id. Dorobię id do tego jeszcze

Xarviel

2022-09-23 08:23

Xarviel2022-09-23 08:23

Rejestracja:ponad 3 lata
Ostatnio:około 6 godzin
Postów:847

1

a możesz mi jeszcze podpowiedzieć jak zrobić aby można było zrobić ikonki aktywne. Chce żeby po naciśnięciu danej ikonki dodawał mi się do list ten produkt np po id. Dorobię id do tego jeszcze

Mogę zrobić przykład w zwykłym Reactcie, a ty sobie to przerobisz na Native.

Kopiuj

import React, { useState } from "react";
import ReactDOM from "react-dom";

// Zamieniłem tablicę na obiekt, żeby uprościć dodawanie i usuwanie elementów z listy
const products = {
  1: { // <-- klucz musi być zawsze równy id
    id: 1,
    title: "Lorem ipsum 1",
    image: "...",
    imageAlt: "..."
  },
  2: {
    id: 2,
    title: "Lorem ipsum 2",
    image: "...",
    imageAlt: "..."
  },
  3: {
    id: 3,
    title: "Lorem ipsum 3",
    image: "...",
    imageAlt: "..."
  },
  //...
  1023: {
    id: 1023,
    title: "Lorem ipsum 1023",
    image: "...",
    imageAlt: "..."
  }
};

// Do komponentu Product przekazujemy funkcję toggleProduct, która odpowiada za dodanie lub usunięcie produktu z listy
const Product = ({ toggleProduct, ...product }) => (
  <div style={{ marginTop: "15px" }}>
    {product.title}
    <img src={product.image} alt={product.imageAlt} />
    {toggleProduct && (
      <button onClick={() => toggleProduct(product.id, product)}>
        Zmień status
      </button>
    )}
  </div>
);

const App = () => {
  // Tworzymy stan
  const [activeProducts, setActiveProducts] = useState({});

  // Tworzymy funkcję odpowiedzialną za dodawanie i usuwanie produktu
  const toggleProduct = (id, product) => {
    if (activeProducts[id]) {
      setActiveProducts((prevProducts) => {
        delete prevProducts[id];

        // Jeśli aktualizujemy stan, który jest tablicą, lub obiektem to musimy zwrócić całkowicie nową wartość
        return { ...prevProducts }; 
      });
    } else {
      setActiveProducts({
        ...activeProducts,
        [id]: product
      });
    }
  };

  return (
    <>
      Lista wszystkich produktów:
      {/* Teraz cała lista jest w formie obiektu, więc przy wyświetlaniu musimy z powrotem przekształcić ją w tablice */}
      {Object.values(products).map((props) => (
        <Product key={props.id} {...props} toggleProduct={toggleProduct} />
      ))}
      <br />
      <br />
      Lista aktywnych produktów:
      {Object.values(activeProducts).map((props) => (
        <Product key={props.id} {...props} />
      ))}
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

Cała zasada polega na tym, że w jednym komponencie musisz stworzyć stan, oraz funkcję do zmiany tego stanu i przekazać je do komponentów potomnych takich jak mój Product,

edytowany 4x, ostatnio: Xarviel 2022-09-23 08:36

TakMaszRacje

2022-09-23 14:07

TakMaszRacje2022-09-23 14:07

Rejestracja:prawie 4 lata
Ostatnio:około miesiąc
Postów:91

0

A mazes mi jeszcze pwiedzieć dlaczego dostaje byład?

Kopiuj

class Product extends React.Component {

    const navigation = useNavigation();

    render() {
        const { id, image, title, } = this.props.product
        
        return (

            <View style={styles.rootCointener}>
                <TouchableOpacity onPress={() =>  {navigation.replace('Service')}}>
                    <Image style={styles.imageCointener} source={image} />
                </TouchableOpacity>
                <Text style={styles.textCointener}>{title}</Text>
            </View>
        )
    }
}

TransformError SyntaxError: test/Product.js: Unexpected token (12:10)

10 | class Product extends React.Component {
11 |

12 | const navigation = useNavigation();
| ^
13 |
14 | render() {
15 | const { id, image, title, } = this.props.product
at http://192.168.18.129:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:35674:25 in showCompileError
at http://192.168.18.129:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:35593:28 in <unknown>
at http://192.168.18.129:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:36109

edytowany 2x, ostatnio: TakMaszRacje 2022-09-23 14:07

Xarviel

2022-09-23 14:22

Xarviel2022-09-23 14:22

Rejestracja:ponad 3 lata
Ostatnio:około 6 godzin
Postów:847

0

@TakMaszRacje, ponieważ hooki działają jedynie w komponentach funkcyjnych, a to jest klasowy.

TakMaszRacje 2022-09-23 14:23

Dziękuje za odp. A jak mogę to zastąpić ?

Xarviel 2022-09-23 14:24

Przepisz komponent na funkcyjny

TakMaszRacje

2022-09-23 14:39

TakMaszRacje2022-09-23 14:39

Rejestracja:prawie 4 lata
Ostatnio:około miesiąc
Postów:91

0

Zminiłem ale w tej chwilo lista mi się nie pojawiła

Kopiuj

function  Product(id, image, title) {

    const navigation = useNavigation();
 
        return (

            <View style={styles.rootCointener}>
                <TouchableOpacity onPress={() =>  {navigation.replace('Service')}}>
                    <Image style={styles.imageCointener} source={image} />
                </TouchableOpacity>
                <Text style={styles.textCointener}>{title}</Text>
            </View>

Zobacz pozostałe 6 komentarzy

TakMaszRacje 2022-09-25 18:50

tak przekazuje. <FlatList numColumns={3} data={product} keyExtractor={item => item.id} renderItem={({ item }) => (<Product product={item} />)}></FlatList> </SafeAreaView>

Xarviel 2022-09-25 19:52

Czyli źle :P Jeśli powyższy kod jest aktualny function Product({ id, image, title }) to propsy powinieneś przekazać tak <Product id={3} image="..." title="..." />. Jeśli zmienna item zawiera właściwości id / image / title to możesz cały zapis skrócić w taki sposób <Product {...item} /> i obecnie nie powinno być żadnego <Product product={item} />.

TakMaszRacje 2022-09-25 20:18

Dziękuje działa. Wcześniej przekazywałem product={...item}.

TakMaszRacje 2022-09-26 13:34

Mam jeszcze pytanie. Jak stworzę nowy komponent i chciałbym mu przekazać id z listy po kliknięciu . Czyli przekazuje Product {...item} i w Product dostaje id i chciałbym to Id przekazać do komponenty np. TestApp w którym będę mógł użyć tego id. ?

Xarviel 2022-09-26 13:42

Możesz mieć pytanie, ale nie wiem jaki masz z tym problem i czego nie rozumiesz, musiałbyś to lepiej rozpisać + pokazać kod. Teoretycznie temat ikon został rozwiązany już dawno temu, więc najlepiej założyć nowy wątek do tego.

FlatList nie widać ikon

TakMaszRacje

Xarviel

TakMaszRacje napisał(a):

Xarviel

TakMaszRacje

Xarviel

TakMaszRacje

PHP + Codeigniter 4 programista, aplikacja do fakturowania

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami