Блог

Главная - Вопросы по программированию - Доступ к экрану сведений о плоском списке из другого компонента React-Native

Доступ к экрану сведений о плоском списке из другого компонента React-Native

#react-native #react-native-flatlist

#react-native #react-native-плоский список

Вопрос:

У меня есть плоский список, страницу сведений о котором можно посетить с помощью следующей кнопки

 <TouchableOpacity
              activeOpacity={0.5}
              style={styles.iconBtn}
              onPress={() =>
                props.navigation.navigate('poDetails', {
                  productId: itemData.item.id,
                })
              }>

Однако я хочу посетить различные экраны сведений о продукте из некоторых других мест в приложении.
Как мне это сделать?

Передача реквизитов в деталях, как показано ниже:

 const productId = route.params.productId;
  const dispatch = useDispatch();
  const selectedProduct = useSelector((state) =>
    state.products.popular.find((prod) => prod.id === productId),
  );

Комментарии:

1. не получается именно то, что вы хотите! вы хотите отобразить сведения о продуктах на той же странице с другим идентификатором продукта? на основе щелчка в плоском списке.

2. нет брата. Я просто хочу посетить страницу сведений о продукте с помощью некоторых статических кнопок

3. у меня есть 5 кнопок на другом экране. Я тоже хочу посетить каждую страницу сведений с этого экрана.

4. поэтому создайте только одну страницу и покажите подробности, извлекая сведения о продукте на основе идентификатора продукта! в чем проблема?

Ответ №1:

Вы имеете в виду вот так?

 const screens = [
    'poDetails1',
    'poDetails2',
    'poDetails3',
    'poDetails4',
    'poDetails5'
];


<TouchableOpacity
   activeOpacity={0.5}
   style={styles.iconBtn}
   onPress={() =>
      props.navigation.navigate(screens[productId], {
          productId: itemData.item.id,
   })}>

Это пример, если ваш ProductID был равен 0, 1, 2, 3 и …

Вы можете изменять постоянные экраны в соответствии с тем, что вам нужно

Ответ №2:

Конечный результат:

введите описание изображения здесь

Вместо того, чтобы передавать только a productId в качестве параметра, вы также можете просто передать весь объект product, поэтому не будет необходимости в последующей обработке, например, в поиске этого объекта product на основе productId , как сейчас, что вы делаете.

 /* App.js */
import React, { useState, useEffect } from 'react';
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Image,
} from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import DetailsScreen from './DetailsScreen';
const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function Home({ navigation }) {
  const [products, setProducts] = useState(data);

  useEffect(() => {
    console.log(products);
  }, [products]);

  return (
    <View style={styles.container}>
      <FlatList
        data={products}
        renderItem={({ item }) => {
          return (
            <TouchableOpacity
              onPress={() => navigation.navigate('Details', { product: item })}>
              <Card style={styles.card}>
                <View style={styles.textBox}>
                  <Text>{item.name}</Text>
                  <Text>$ {item.price.toString()}</Text>
                  <View style={{ flexDirection: 'row' }}></View>
                </View>
                <Image
                  style={styles.image}
                  source={{
                    uri: item.image,
                  }}
                />
              </Card>
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
}

const data = [
  {
    id: 1,
    name: 'Mix Pina Colada',
    desc: 'Ice Cream Bar - Oreo Cone',
    image: 'http://dummyimage.com/110x138.png/dddddd/000000',
    price: 93,
    quantity: 0,
  },
  {
    id: 2,
    name: 'Cake - Bande Of Fruit',
    desc: 'Cheese - Cheddar With Claret',
    image: 'http://dummyimage.com/172x223.png/cc0000/ffffff',
    price: 4,
    quantity: 0,
  },
  {
    id: 3,
    name: 'Lid Coffee Cup 8oz Blk',
    desc: 'Rosemary - Primerba, Paste',
    image: 'http://dummyimage.com/110x243.png/ff4444/ffffff',
    price: 18,
    quantity: 0,
  },
  {
    id: 4,
    name: 'Monkfish - Fresh',
    desc: 'Sauce - Mint',
    image: 'http://dummyimage.com/124x117.bmp/dddddd/000000',
    price: 16,
    quantity: 0,
  },
  {
    id: 5,
    name: 'Duck - Whole',
    desc: 'Pineapple - Regular',
    image: 'http://dummyimage.com/135x169.jpg/ff4444/ffffff',
    price: 5,
    quantity: 0,
  },
  {
    id: 6,
    name: 'Veal - Striploin',
    desc: 'Table Cloth - 53x69 Colour',
    image: 'http://dummyimage.com/172x235.bmp/cc0000/ffffff',
    price: 74,
    quantity: 0,
  },
  {
    id: 7,
    name: 'Gherkin - Sour',
    desc: 'Wine - Red, Antinori Santa',
    image: 'http://dummyimage.com/218x137.jpg/5fa2dd/ffffff',
    price: 32,
    quantity: 0,
  },
  {
    id: 8,
    name: 'Mustard - Dijon',
    desc: 'Creme De Cacao White',
    image: 'http://dummyimage.com/159x124.png/dddddd/000000',
    price: 64,
    quantity: 0,
  },
  {
    id: 9,
    name: 'Bread Crumbs - Japanese Style',
    desc: 'Cabbage - Red',
    image: 'http://dummyimage.com/239x217.png/cc0000/ffffff',
    price: 19,
    quantity: 0,
  },
  {
    id: 10,
    name: 'Veal - Inside',
    desc: 'Cassis',
    image: 'http://dummyimage.com/222x166.png/ff4444/ffffff',
    price: 8,
    quantity: 0,
  },
];
 
 /* DetailsScreen.js */
import React, { useState, useEffect } from 'react';
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  TouchableOpacity,
  Button,
  Image,
} from 'react-native';
import { Card } from 'react-native-paper';

const DetailsScreen = ({ navigation, route }) => {
  /* instead of productId we are passing the whole product object which 
     we can use right away for rendering purpose
  */
  const { product } = route.params;
  console.log(JSON.stringify(product));
  return (
    <View style={{justifyContent: "center", flex: 1}}>
      {product.name amp;amp; (
        <>
          <Image
            style={{ width: 200, height: 200 }}
            source={{
              uri: product.image,
            }}
          />
          <View>
            <Text>{product.name}</Text>
            <Text>{product.desc}</Text>
            <Text>$ {product.price.toString()}</Text>
          </View>
        </>
      )}
    </View>
  );
};

export default DetailsScreen;

Рабочий пример: закуска на выставке