基本简单的React Navigation v5在屏幕之间导航。

Question

我花了2天时间搜索、阅读，找到了很多基于v3和v4类的例子，了解如何在React Native Navigation中处理导航。

我想实现的是使用react native navigation在我的两个屏幕之间移动。我的App.js包含Tab导航器，而且工作得很好。标签打开了一个名为 "Mens "的组件（屏幕），从那里我希望能够打开一个PDP页面，传递一个文章ID的属性。

我已经尝试了许多方法来连接应用程序以允许这样做；我已经阅读了所有的react native文档并尝试了许多方法。

创建了一个单独的文件来包含naviagtion栈。

import * as React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import News from './news';
import Mens from './mens'
import Watch from './watch'

const Stack = createStackNavigator()

function MainStackNavigator() {
  return (
    <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="News" component={News} />
      <Stack.Screen name="Mens" component={Mens} />
    </Stack.Navigator>
  </NavigationContainer>
  )
}

export default MainStackNavigator

但是当我尝试使用其中一个屏幕时，我得到一个错误。我尝试的onpress是。

<TouchableOpacity onPress={() => navigation.navigate('Mens')}>

我也曾试图将NavigationContainer堆栈导航器的代码移到新闻组件中，但我没有设法让它工作。

我想要的流程很简单，App.js有我的标签，5个标签导航到主屏幕，然后在每个标签上，人们可以点击一个平列的列表项（显示摘要）来阅读完整的文章。

news.js文件内容如下。

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Image, ListItem, Text, View, StyleSheet, ScrollView, TouchableOpacity, Alert} from 'react-native';
import Moment from 'moment';
import MatchReports from './matchreports.js';
import navigation from '@react-navigation/native';

const News = (props) => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  function chkValue(val) {
    if(val.length == 0){
       val = 'https://derbyfutsal.files.wordpress.com/2019/07/banner-600x300.png';
      }else{
        val = val;
   }
    return val;
  }
  useEffect(() => {
    fetch('https://xxxx')
      .then((response) => response.json())
      .then((json) => {
        setData(json)
        })
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  return (

    <ScrollView>
      <View style={styles.body}>
        <Text style={styles.titlesnopadding}>Watch</Text>
        <View style={{height:200}}>
        <Watch />
        </View>
        <Text style={styles.titles}>Match reports</Text>
        <View style={{height:100}}>
        <MatchReports typeOfProfile='Men'/>
        </View>

      <Text style={styles.titles}>Latest News</Text>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
          <View>
            <TouchableOpacity onPress={() => navigation.navigate('Mens')}>
            <Image style={styles.img} source={{ uri: chkValue(item.jetpack_featured_media_url) }} />
            <View>
                <Text style={styles.textbck}>{item.title.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>
                <Text style={styles.summary}>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}{"\n"}{Moment(item.date, "YYYYMMDD").fromNow()}</Text>
          </View>
          </TouchableOpacity>
          </View>
          )}
        />
      )}
    </View>
    </ScrollView>
  );
};

任何帮助都是感激的，因为我读了很多使用类而不是功能编程和过时的导航，它是具有挑战性的工作。

EDIT:

我漏掉了props.navigation.navigate('Mens')，现在可以正常工作了。虽然它只解决了我一半的问题。

我的app.js里有以下内容。

import 'react-native-gesture-handler';
import React from 'react';
import { View, StyleSheet, Image } from 'react-native';
import News from './components/news';
import Shop from './components/shop';
import Mens from './components/mens';
import Fixtures from './components/fixtures';
import Ladies from './components/ladies';
import Pdp from './components/pdp'
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const App = () => {
return (
  <View style={styles.header}>
    <View>
    </View>
    <View style={styles.body}>
    <NavigationContainer>
      <Tab.Navigator>
         <Tab.Screen name="News" component={News} />
         <Tab.Screen name="Mens" component={Mens} />         
         <Tab.Screen
          name="icon"
          component={Shop}
          options={{
            title: '',
            tabBarIcon: ({size,focused,color}) => {
              return (
                <Image
                  style={{ marginTop:20,width: 80, height: 80 }}
                  source={{
                    uri:
                      'https://derbyfutsal.files.wordpress.com/2020/05/derby-futsal-logo-2019.png',
                  }}
                />
              );
            },
          }}
        />
         <Tab.Screen name="Ladies" component={Ladies} />
         <Tab.Screen name="Fixtures" component={Fixtures} />
       </Tab.Navigator>
       </NavigationContainer>
    </View>
  </View>
)
};

const styles = StyleSheet.create({
header: {
  marginTop: 20,
  height:0,
  flex: 1
},
body: {
  flex:2,
  flexGrow:2,
},
nav: {
fontSize: 20,
},
});

export default App;

如果我在news.js屏幕中引用它，任何被设置为tab Screen的东西都能正常工作，但我不想在这里声明PDP.js，因为我不想让它显示为tab。

相反，一旦用户使用标签导航进入一个屏幕，用户再点击flatlist中的一个项目，就会打开pdp.js。

在很多方面，一旦有人打开了主分类（如在标签导航上看到的），并点击了flatlist中的项目，我想做的就是。

<a href="pdp.js?id=xxxxx">

Answer 1

https:/reactnavigation.orgdocsnavigation-actions#navigate

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

navigation.dispatch(
  CommonActions.navigate({
    name: 'Profile',
    params: {
      user: 'jane', // props.route.params.user
    },
  })
);