从平面列表项导航到另一个堆栈屏幕

应用程序如何工作！

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

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

第一：是要求用户选择数据的UI屏幕，
第二：保存列表的屏幕是否包含名称，我使用平面列表列出它们(顺便说一句，数据来自 SqLite -不重要-(
第三：是显示名称含义的屏幕，

我正在从"主屏幕"导航到"名称列表屏幕"，然后导航到"名称含义屏幕"，

通过按列表中的项目完成的"名称含义屏幕"的导航。

直到这里，该应用程序运行良好！

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

我也做了那一步。

但是现在面对的是！

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

但是它给出了错误，没有这样的屏幕称为"NameMeaing"，然后它说" 名称屏幕它不由任何导航器处理"，因此据我了解，当我在选项卡中时，程序无法访问堆栈导航器，并且它给出了该错误。

尽管我能够在 Web 上找到很多，但有从选项卡导航到另一个堆栈屏幕的示例，但在所有示例中，选项卡是应用程序中的主屏幕，但就我而言，我在按下某个按钮后到达选项卡并导航到另一个堆叠屏幕。

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

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

这是它显示的错误：当我尝试从一个选项卡屏幕导航到另一个不同的屏幕时出错

这是应用程序.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>
);
}
}

这是选项卡.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>

);
}

提前感谢，我如何构建此算法的任何帮助都得到了真正的认可。.

这是版本兼容性的问题，我一起使用 React 导航 V4 和 V5，搜索更多后，我以这种方式解决了它，更改应用程序.js并在应用程序中编写所有堆栈和选项卡导航器.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>
);
};

相关内容

最新更新

热门标签：