Question

我想按一个平面项目，然后打开一个包含该项目详细信息的新屏幕，但是最好的方法是什么？我应该做一个模态并提供细节吗？还是应该为每个项目都新建一个屏幕？

const renderRecipe = ({ item }) => {
    return (

      <View style={styles.item}>
        <Image style={styles.image} source={{ uri: item.image }}>
        </Image>
        <Text style={{
          color: '#00aecc', fontSize: 18,
          marginTop: 15
        }}>{item.label}</Text>
        <View style={{ alignItems: "center" }}>
          <Text style={{ color: '#fff', marginTop: 100, fontSize: 20 }}>Zutaten:</Text>
          <Text style={{ color: '#00aecc', fontSize: 18, marginTop: 15 }}>{item.id}</Text>
        </View>
      </View >
    )
  }


  return (
    <View style={styles.container}>
      {isLoading && <View style={{ height: "100%", width: "100%" }}><ActivityIndicator style={styles.loading} color='#00aecc' size="large" /></View>}
      <FlatList
        data={userRecipes}
        renderItem={renderRecipe}
        keyExtractor={(item) => item.id}>
      </FlatList>
    </View >
  );

这是我的物品，现在我该怎么做。

Answer 1

我会尽力解释。您有两个屏幕Home和Details。

在Home屏幕中假设Flatlist。因此，当您单击Flatlist上的项目时，您将导航至包含项目详细信息的Details屏幕。就是这样！

您也可以使用模式来做到这一点。但是，这取决于要求。没有完美的解决方案。您可以根据情况进行操作。

在您的情况下，我将执行以下操作。首先，我将导入TouchableOpactiy和useNavigation。

import {TouchableOpactiy} from 'react-native'
import { useNavigation } from '@react-navigation/native';

Then I will use it to my flatlist items.

Home Screen

 const Home = () => {
    
    const navigation = useNavigation();
    
    const renderRecipe = ({ item }) => {
         return (
          <TouchableOpactiy onPress={()=> navigation.navigate('Details', {item} )}>
            <View style={styles.item}>
              <Image style={styles.image} source={{ uri: item.image }}>
             </Image>
             <Text style={{
               color: '#00aecc', fontSize: 18,
               marginTop: 15}}>{item.label}</Text>
            <View style={{ alignItems: "center" }}>
              <Text style={{ color: '#fff', marginTop: 100, fontSize: 20 }}>Zutaten: 
              </Text>
              <Text style={{ color: '#00aecc', fontSize: 18, marginTop: 15 }}>{item.id} 
              </Text>
            </View>
          </View >
      </TouchableOpactiy>
        )
      }
    
    return (
     /*your flalist*/
     )
   }

Details Screen

const Details = ({ route, navigation ) => {
  const { item } = route.params;
 
  return (
    <Text>{item.label}</Text>
 )
}

React Native：我如何按下平板列表项目并打开该项目的特定屏幕？

1 个答案: