React native react navigation.navigate中的touchableopacity onPress问题

我试图实现这些代码，但失败了。”undefined不是评估“navigation.navigate”的对象。单击该对象时显示错误。我想使用触摸不透明度，而不是按钮。我该怎么修理？或者我可以在TouchablePlace中使用没有默认样式的按钮吗

import React from 'react'
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Platform,
} from 'react-native'

import { Ionicons } from '@expo/vector-icons'

const ArticleItem = ({
    article: {
        id,
        title,
        content,
        date,
    },
    navigation,
}) => {
 
    return (
        <View>
        <TouchableOpacity
        activeOpacity={0.8}
        onPress={() => navigation.navigate('ViewStack')} <-error point
        >
        <View style={styles.container}>
             <View style={styles.icon}>
             <Ionicons name="md-list" size={14} color="#9E9E9E"/>
         </View>
        <View style={styles.info}>
            <Text style={styles.title}>
            {title}
            </Text>
            <Text style={styles.content}>
            {content}
            </Text>
             <Text style={styles.date}>
                {date}
             </Text>
        </View>
    </View> 
     </TouchableOpacity>
     </View>
         
    
    
    );    
    }
    
    
     

    


const styles = StyleSheet.create({
    container: {
    flexDirection: 'row',
    padding: 16,
    paddingBottom: 0,
    },
    icon: {
      width: 16,
      height: 16,
      marginRight: 8,
      justifyContent: 'center',
      alignItems: 'center',
      paddingTop: Platform.select({
          ios: 3, android: 8,
      })
    },
    title: {
        marginBottom: 8,
        fontSize: 16,
        fontWeight: '800',
        color: '#212121',
    },
    content: {
        marginBottom: 4,
        fontSize: 14,
        color: '#9E9E9E',
        lineHeight: 18,
    },
    date: {
         fontSize: 12,
         color: '#BDBDBD',
    },
    info: {
        flex: 1,
       paddingBottom: 16,
       borderBottomWidth: 1,
       borderBottomColor: '#DEDEDE',
    },
})

export default ArticleItem

ArticleItem.js

import React from 'react'
import {
    View,
    Text,
} from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'
import ViewDiaryScreen from './ViewDiaryScreen'

const Stack = createStackNavigator();

const ViewStackScreen = () => {
    return (
     <Stack.Navigator>
         <Stack.Screen name="ViewStack" component={ViewDiaryScreen}/>
     </Stack.Navigator>
        )
}

export default ViewStackScreen

ViewStackScreen.js放置在screens/ViewStackScreen.js中

import React from 'react'
import {
    Text,
    StyleSheet,
    SafeAreaView, 
} from 'react-native'
const ViewDiaryScreen = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text>
                Screen
            </Text>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
})

export default ViewDiaryScreen

ViewDiaryScreen.js

import React from 'react'
import {
    View,
    Text,

} from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import Header from '../components/Header'
import ArticleItem from '../components/ArticleItem'


const DiaryScreen = () => {
    return (
<View style={{ flex: 1}}>
    <Header title="new Diary" />

    
    
<ArticleItem 
    article={{
        id: 1,
        title: 'Test1',
        content: 'contentTest1',
        date: '2021/1/2',
    }}
/>
<ArticleItem 
    article={{
        id: 1,
        title: 'Test2',
        content: 'contentTest2',
        date: '2021/1/2',
    }}
/>
</View>
    );
}


export default DiaryScreen

---

正如Hend EL Sahli提到的，它与您的TouchableOpacity无关，但我相信您应该在堆栈导航器中同时使用这两个屏幕，如下所示：

import React from 'react'
import {
    View,
    Text,

} from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import Header from '../components/Header'
import ArticleItem from '../components/ArticleItem'


const DiaryScreen = () => {
    return (
<View style={{ flex: 1}}>
    <Header title="new Diary" />

    
    
<ArticleItem 
    article={{
        id: 1,
        title: 'Test1',
        content: 'contentTest1',
        date: '2021/1/2',
    }}
/>
<ArticleItem 
    article={{
        id: 1,
        title: 'Test2',
        content: 'contentTest2',
        date: '2021/1/2',
    }}
/>
</View>
    );
}


export default DiaryScreen

return (
     <Stack.Navigator>
         <Stack.Screen name="ArticleItem" component={ArticleItem}/>
         <Stack.Screen name="Viewstack" component={ViewDiaryScreen}/>
     </Stack.Navigator>
        )