我有一个项目列表，我想使用 react native navigation 将导航传递给它

Question

我有一个项目列表，我想使用 React Native Navigation 将导航传递给它，这是我的主要代码，

import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity, ScrollView, Image } from 'react-native'
import ItemComponent from './ItemComponent'

const ItemDescription = ({navigation}) => {
    return (
        <View style={styles.container}>
            <ScrollView style={{marginBottom: '15%'}}>
               <ItemComponent title='Shirts' 
               imageSource={require('../Screen/Images/Shirt.png')}
               />

              <ItemComponent  title="T-Shirt"
                imageSource={require('../Screen/Images/t-shirt.png')}
              /> 
            </ScrollView>
       </View>
    )
}

我需要在代码的哪一部分使用导航以及如何在其上传递任何道具？

Answer 1

如果您被迫为页面使用全新的屏幕，那没关系，但如果您的导航屏幕共享大部分内容，建议使用道具。

如果您想根据即将到来的道具进行导航，可以使用两种方法：

在使用组件之前从组件外部处理它

2.in 你的组件有一个功能决定你想导航到哪个屏幕（我推荐）

    const ItemComponent = ({title, imageSource, navigation}) => { 
function whatis(){
 if(title === "pant"){
 return "NameOFScreenYouWantToNavigate"
}
}
return (
    
        <View style={styles.touchcontainer}>
            <TouchableOpacity style={styles.touchables}
            onPress={()=>{navigation.navigate(whatis())}}
             >
               
                    <Text style={styles.textStyles}>{title}</Text>
                
    
                
                    <Image source={imageSource} style={styles.imageStyle} />
                
              
                
    
            </TouchableOpacity>
    
         </View>
            
        </View>
    )
    }

我有一个项目列表，我想使用 react native navigation 将导航传递给它

I have a list of items which i want to pass navigation to it using react native navigation

react-native

react-native-component

react-native-navigation

react-navigation