Question

我有一个 Flatlist，可以使用以下按钮访问其详细信息页面

<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),
  );

Answer 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 和 ...

您可以根据需要修改屏幕常量

Answer 2

最终输出：

不是只传递一个 productId 作为参数，你也可以简单地传递整个产品对象，所以不需要像基于 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 && (
        <>
          <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;

工作示例：Expo Snack

从其他组件 React-Native 访问 Flatlist 详细信息屏幕

2 个答案: