编辑：

Question

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

我要做的就是使用react native导航在两个屏幕之间移动。我的App.js包含Tab导航器，并且工作正常。该选项卡打开了一个名为Mens的组件（屏幕），从那里我希望能够打开一个PDP页面，该页面传递文章ID的属性。

我尝试了多种方法连接应用程序以允许这种操作；我已经阅读了所有React本机文档并尝试了多种方法；

创建了一个单独的文件以包含导航堆栈；

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

但是当我尝试使用其中一个屏幕时，出现错误。我尝试的机上广告是

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

我还尝试将NavigationContainer / Stack Navigator代码移到News组件中，但是我没有设法使它工作。

我想要的流程很简单； 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>
  );
};

感谢任何帮助，因为我已经阅读了很多使用类而不是函数式编程和过时的导航的书，以致于解决它一直很困难。

编辑：

我错过了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屏幕中引用了标签屏幕，那么在此设置为“标签屏幕”的一切都可以正常工作，但是我不想在其中声明PDP.js，因为我不想将其显示为标签。

相反，一旦用户使用选项卡导航进入屏幕，然后用户单击单位列表中的项目，便会打开pdp.js。

在很多方面，一旦有人打开了主要类别（如标签导航中所示）并单击了平面列表中的某个项目，我要做的就是;

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

Answer 1

https://reactnavigation.org/docs/navigation-actions/#navigate

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

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

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

编辑：

1 个答案: