Question

应用程序的工作方式！

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

所以总共有3个主屏幕！

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

我正在从“主屏幕”导航到“ NameList屏幕”，然后导航到“ NameMeaning屏幕”，

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

直到这里应用程序都能正常运行！

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

我也做了那一步。

但是现在面临的是！

当我按下flatList中的某个项目时，我想从这些选项卡中导航，并导航至我在名称含义上方提到的“第三屏”！

但是它给出了一个错误，那就是没有这样的屏幕，叫做“ NameMeaing”，然后它说“ Name screen（它没有被任何导航器处理）”，据我所知，当我在选项卡中时，该程序无法访问到堆栈的Navigator和cuz都会给出该错误。

尽我所能在Web上找到，有一些从选项卡导航到另一个堆栈屏幕的示例，但是在所有示例中，选项卡是应用程序中的主屏幕，但在我的情况下，按下某个按钮后进入标签页，然后导航到另一个堆叠屏幕。

为解决该问题，我考虑在包含选项卡的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并组合了App.js中的所有堆栈和标签导航器

此人的信用：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中的项目导航到选项卡中，然后转到另一个堆栈屏幕

1 个答案: