从选项卡中存在的 FlatList 项目导航到另一个堆栈屏幕

Question

应用程序如何工作！

我有一个显示名称列表的应用程序，然后显示名称的含义取决于用户从下拉列表中选择的一些偏好。

所以总共有一个主要的 3 个屏幕！

首先：是要求用户选择数据的 UI 屏幕，
其次：是包含名称的列表的屏幕，我使用 FlatList 列出它们（顺便说一句，数据从 SqLite 检索 - 不重要 -）
第三：是显示名称含义的屏幕，

我正在从“主屏幕”导航到“姓名列表屏幕”，然后导航到“姓名含义屏幕”，

通过按列表中的项目导航到“NameMeaning-Screen”。

至此应用运行良好！

我决定向该应用程序添加一项新功能，以显示我在我的数据库中的所有姓名，并在具有两个选项卡的屏幕中显示它，第一个选项卡显示男性姓名，第二个选项卡显示女性的名字。

我也做了那一步。

但是现在面临的是！

我想在按下 flatList 中的项目时从该选项卡导航，然后导航到我在名称含义上面提到的“第三屏幕”！

但它给出了错误，没有这样的屏幕称为“NameMeaing”然后它说“名称屏幕它没有被任何导航器处理”，据我所知，当我在选项卡中时程序有无法访问堆栈导航器，因为它给出了该错误。

正如我在网上找到的那样，有从选项卡导航到另一个堆栈屏幕的示例，但在所有示例中，选项卡是应用程序的主屏幕，但在我的情况下我按下某个按钮后到达选项卡并导航到另一个堆叠屏幕。

作为问题的解决方案，我考虑在我的 Tabs.js 文件中创建一个包含选项卡的辅助堆栈导航器，但我不能，然后我想我应该在我的 App.js 中创建一个选项卡导航器] 将它添加到我已经存在的堆栈导航器中，并将它们组合在导航器容器中。也许这是解决方案，但我无法完成代码并连接点。有什么帮助吗？！

这是应用程序工作时的视频（场景） https://youtu.be/dBLNF5zMCt0

这是它显示的错误： Error when i try to navigate from a tab screen to another different screen

这是App.js文件

    import 'react-native-gesture-handler';
import React, {Component} from 'react';
import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer} from 'react-navigation';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

import MainScreen from './MainScreen';
import NamesList from './NamesList';
import NameMeaning from './NameMeaning';
import NameListWithTabsAgirlAboy from './NameListWithTabsAgirlAboy';



const App = createStackNavigator(
  {
    MainScreen: {
      screen: MainScreen,
      navigationOptions: {
        header: null,
      },
    },
    NamesList: {
      screen: NamesList,
      navigationOptions: {
        header: null,
      },
    },
    NameListWithTabsAgirlAboy: {
      screen: NameListWithTabsAgirlAboy,
      navigationOptions: {
        header: null,
      },
    },
    NameMeaning: {
      screen: NameMeaning,
      navigationOptions: {
        header: null,
      },
    },
  },
  {
    initialRouteName: 'MainScreen',
  }
);

export default createAppContainer(App);

这是NameMeaninng.js文件

 class NameMeaning extends Component {
  constructor(props) {
    super(props);
  }



  render() {
    const {navigation} = this.props;
    return(
      
      <SafeAreaView style= {styles.container}>
        <Text style={styles.title}>معنى اسم {JSON.stringify(navigation.getParam('nameTitle', 'NO-ID'))}</Text>
        <ScrollView style={styles.scrollView}>
          <Text style={styles.text}>
          {JSON.stringify(navigation.getParam('explaination', 'NO-ID'))}

          </Text>
        </ScrollView>
      </SafeAreaView>

    );
  }
}

这是 Tabs.js 文件的一部分

This file have three classes in totall. BoysScreen, GirlsScreen and Tabs classes..

   class BoysScreen extends React.Component {
    constructor(props) {
        super(props);
        const {navigation} = this.props;
      }
    render() {
        let FlatListNames =  [];
        FlatListNames = boysNames();
        const {navigation} = this.props;

        function Item({ title }, {navigation}) {
            return (
                <View style = {StyleSheet.item}>
                    <Text styel = {styles.title}> {title} </Text>
                    <Text style ={StyleSheet.explain}>اضغط للشرح</Text>
                </View>
            )
        }


        function boysNames() {
            var boysNamesList = [];
            db.transaction(tx => {
                // boys names
              tx.executeSql('SELECT ID, Name, Explanation FROM Names WHERE NameSex=?', ["لـ طفلي"], (tx, results) => {
                  for (let i = 0; i < results.rows.length; ++i) {
                    boysNamesList.push(results.rows.item(i));
                  }
                });
          }); // DB transaction    
          return boysNamesList;
        };



        return(
                <View style= {styles.container}>
                    <FlatList
                        data={FlatListNames}
                        keyExtractor={(item, index) => index.toString()}
                        renderItem={({ item }) => 
                                            <TouchableOpacity
                                            onPress = {() => {this.props.navigation.navigate('NameMeaning',{
                                                nameTitle : item.Name,  
                                                nameId : item.ID,
                                                explaination : item.Explanation,
                                            });
                                        }}
                                                    >
                                                            <Item title = {item.Name}/>
                                            
                                            </TouchableOpacity>
                                    }
                    />
                </View>
            
        );
    }
}// ends of BoysScreen Class







    class Tabs extends React.Component {
    constructor(props){
        super(props);
    }
    render() {
    const Tab = createMaterialTopTabNavigator();
    
    // I have tried to create a stack here but it gave errors and couldnt solve it
    //cont Stack = createStackNavigator();
        return(
            <NavigationContainer>
                <Tab.Navigator>
                    <Tab.Screen name ="FemaleNames" component = {GirlsScreen} /> //GirlsScreen is a class
                    <Tab.Screen name = "MaleNames" component = {BoysScreen} /> // BoysScreen is a class
                </Tab.Navigator>
        
               // I have tried to import NameMeanig class and navigate to it like this, but it gaves errors too.
               //<Stack.Screen name="Home" component={NameMeaning} /> 

            </NavigationContainer>
            
        );
    }

提前致谢，任何关于我如何构建这个算法的帮助都非常有用..

Answer 1

这是版本兼容性的问题，我一起使用 React 导航 V4 和 V5，在搜索更多之后我已经通过这种方式解决了它，更改 App.js 并合并 [中的所有堆栈和选项卡导航器=16=]

归功于这个人：https://www.youtube.com/watch?v=nQVCkqvU1uE

import 'react-native-gesture-handler';

import React, {Component} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

import MainScreen from './App/components/Home/MainScreen';
import NamesList from './App/components/NameList/NamesList';
import NameMeaning from './App/components/NameMeaning/NameMeaning';

import GirlNamesScreen from './App/components/NameList/GirlsNamesTab';
import BoysNamesScreen from './App/components/NameList/BoysNamesTab';




const MainStack = createStackNavigator();
const MainStackScreen = () => (
  <MainStack.Navigator>
    <MainStack.Screen
      name="MainScreen"
      component={MainScreen}
      options={{ title: "Main Screen title" }}
    />
      <MainStack.Screen
      name="NamesList"
      component={NamesList}
      options={{ title: "NamesList Screen title" }}
    />
      <MainStack.Screen
      name="NameMeaning"
      component={NameMeaning}
      options={{ title: "NameMeaning Screen title" }}
    /> 
      <MainStack.Screen
      name="TabsScreen"
      component={TabsScreen}
      options={{ title: "TabsScreen Screen title" }}
    /> 
  </MainStack.Navigator>
);

const Tabs = createMaterialTopTabNavigator();
const GirlNamesStack = createStackNavigator();
const BoysNamesStack = createStackNavigator();

const GirlNamesStackScreen = () => (
  <GirlNamesStack.Navigator>
    <GirlNamesStack.Screen name="GirlsNames" component={GirlNamesScreen} />
  </GirlNamesStack.Navigator>
);

const BoysNamesStackScreen = () => (
  <BoysNamesStack.Navigator>
    <BoysNamesStack.Screen name="BoysNames" component={BoysNamesScreen} />
  </BoysNamesStack.Navigator>
);

const TabsScreen = () => (
  <Tabs.Navigator>
    <Tabs.Screen name="BoysNames" component={BoysNamesStackScreen} />
    <Tabs.Screen name="GirlsNames" component={GirlNamesStackScreen} />
  </Tabs.Navigator>
);



const RootStack = createStackNavigator();
const RootStackScreen = () => (
  <RootStack.Navigator headerMode="none"> 
      <RootStack.Screen
        name="Main"
        component={MainStackScreen}
        options={{
          animationEnabled: false
        }}
      />
  </RootStack.Navigator>
);


export default () => {

  return (
      <NavigationContainer>
        <RootStackScreen/>
      </NavigationContainer>
  );
};

从选项卡中存在的 FlatList 项目导航到另一个堆栈屏幕

Navigating from a FlatList Items exists in a Tab, to another Stack Screen

android

react-native

react-native-flatlist

stack-navigator