2

我有一个项目列表，我想使用反应原生导航将导航传递给它，这是我的主要代码，

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>
    )
}

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

4

1 回答 1

1

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

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

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

2.在您的组件中使用功能决定您要导航到哪个屏幕（我推荐）

    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>
    )
    }
于 2020-07-28T06:09:03.577 回答