Как отображать данные - ItemList с Flatlist с помощью хуков? - PullRequest
Новая
       45

Как отображать данные - ItemList с Flatlist с помощью хуков?

0 голосов
/ 07 мая 2020

Я прошу помощи с моим проектом приложения для реагирования.

У меня есть приложение со списком покупок, созданное с помощью react-native. Я использую компоненты, и мне нужна помощь в использовании стилей пользовательского интерфейса с собственными элементами реакции при рендеринге сохраненных данных и отображении их в представлении. Внутри комментария работает Flatlist, который сохраняет данные в SQLite. Я безуспешно пробовал React Native FlatList / ListItem, фильтр по элементам 

import React, {Component, useState, useEffect} from 'react';
import { StyleSheet, Text, View, TextInput, FlatList,} from 'react-native';
import { Input, Button, ListItem } from 'react-native-elements';

import * as SQLite from 'expo-sqlite';

export default function ShoppingScreen ( {route, navigation}) {


const [product, setProduct] = useState('');
const [amount, setAmount] = useState('');
const [products, setProducts] = useState([]);

const db = SQLite.openDatabase('shoppinglistdb.db');

useEffect(() => {
  db.transaction(tx => {
    tx.executeSql('create table if not exists shoppinglist (id integer primary key not null, product text, amount text);');
  });
  updateList();    
}, []);


const saveItem = () => {
  db.transaction(tx => {
      tx.executeSql('insert into shoppinglist (product, amount) values (?, ?);', [product, amount]);    
    }, null, updateList
  )
  console.log();
}


const updateList = () => {
  db.transaction(tx => {
    tx.executeSql('select * from shoppinglist;', [], (_, { rows }) =>
      setProducts(rows._array)
    ); 
  });
}


const deleteItem = (id) => {
  db.transaction(
    tx => {
      tx.executeSql(`delete from shoppinglist where id = ?;`, [id]);
    }, null, updateList
  )    
} 


return (


    <View>


       <View>

      <Input placeholder='product' label='PRODUCT'
        onChangeText={(product) => setProduct(product)}
        value={product}/>  
      <Input placeholder='amount' label='AMOUNT'
        onChangeText={(amount) => setAmount(amount)}
        value={amount}/>      

      <Button onPress={saveItem} title="SAVE" /> 



      {/* THIS WORKS, But doesn't use react-native-elements! <FlatList 
        keyExtractor={item => item.id.toString()} 
        renderItem={({item}) => 
        <View>
        <Text style={{fontSize: 18}}>{item.product}, {item.amount} 
        <Text style={{fontSize: 18, color: '#0000ff'}} onPress={() => deleteItem(item.id)}> Bought</Text>
        </Text>

        </View>} 
        data={products} 
      />     */}



         {/* The problem */}
        <View>
        <FlatList 

        keyExtractor={item => item.id.toString()} 
        renderItem={({item}) => 
            <ListItem

            product={item.product}
            amount={item.amount}
            onPress={() => deleteItem(item.id)}


          />
        }
         data={products} 


            />

        </View> 

    </View>


      </View>

);
}
...