Javascript 如何使这些组件导航到react中的另一个屏幕？

我目前正在从事一个react项目，该项目有一个导航页面，其中包含可导航到应用程序各个部分的小部件。但是，我不知道如何让他们导航到合适的屏幕

编辑：

我添加了更多的代码，以便更好地说明我正在尝试做什么

从“React”导入React；
从“react native”导入{View，FlatList，Text，TouchableOpacity，Dimensions}；
从“./LinearGradientScreen”导入LinearGradientScreen；
从“反应本机向量图标/羽毛”导入羽毛；
从“反应本机矢量图标/FontAwesome”导入FontAwesome；
从“反应本机向量图标/材料通信图标”导入材料通信图标；
从“react native vector icons/Entypo”导入Entypo；
常量单元组件=（道具）=>{
返回(
props.navigation.navigate（'tabNavigator'）}
风格={{
背景颜色：props.item.color，
高度：（13*Dimensions.get（'window'）。高度）/100，
宽度：132，
边界半径：5，
阴影颜色：“rgba（52,2,2,1）”，
阴影偏移：{
宽度：3，
身高：3，
},
标高：5，
阴影不透明度：1，
阴影半径：0，
差额：20，
对齐项目：“居中”，
为内容辩护：“中心”，
}}>
{props.item.family=='Feather'(
)：null}
{props.item.family==='MaterialCommunityCons1'(
)：null}
{props.item.family=='Entypo'(
)：null}
{props.item.family==='MaterialCommunityCons2'(
)：null}
{props.item.family=='materialcommunitycons'(
)：null}
{props.item.family==='FontAwesome'(
)：null}
{props.item.name}
);
};
常量主屏幕=（道具）=>{
返回(
家
选择一项服务
{
返回；
}}
/>
);
};
康斯特霍姆斯克里恩达=[
{
id:1，
名称：“AI聊天”，
图标：“cpu”，
家庭：“羽毛”，
颜色：“rgba（247,52122,1）”，
},
{
id:2，
名称：'实时聊天'，
图标：“微信”，
家庭：“真棒”，
颜色：“rgba（16165245,1）”，
},
{
id:3，
名称：'资源'，
图标：“文件文档大纲”，
家庭：“物质社区成员”，
颜色：“rgba（74,74,74,1）”，
},
{
id:1，
名称：'客户端连接'，
图标：“手势水平滑动”，
家庭：“物质社区1”，
颜色：“rgba（237,41,57,1）”，
},
{
id:1，
名称：“DM”，
图标：“消息”，
家庭：“Entypo”，
颜色：“rgba（74144226,1）”，
},
{
id:1，
名称：'Profile'，
图标：“工具提示帐户”，
家庭：“物质社区2”，
颜色：“rgba（144,19254,1）”，
},
];
导出默认主屏幕；

---

是否有类似导航：

'AiScreen.js'，

的东西，我可以用来让它导航到正确的位置？

每个堆栈。屏幕都应该收到道具“name”，以便在“navigation.navigate（“RouteName”）”上可用

从文件中

import*as React from'React'；
从“react native”导入{按钮、视图、文本}；
功能主屏幕（{navigation}）{
返回(
主屏幕
navigation.navigate（'Details'）}
/>
);
}
导出默认主屏幕；

如果您像文档中那样命名您的路线

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import DetailsScreen from "~/pages/Detail";
import HomeScreen from "~/pages/Home";

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator "initialRouteName="Home"  >
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />

      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

import*as React from'React'；
从“react native”导入{View，Text}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“~/pages/Detail”导入DetailsScreen；
从“~/pages/Home”导入主屏幕；
const Stack=createStackNavigator（）；
函数App（）{
返回(
输出：


这里是一个例子，我已经实现了如何导航到Ai聊天屏幕，就像您可以创建其他屏幕一样，在Stack Navigator中定义它们并在其中导航

import * as React from 'react';
import { Button, View, Text, FlatList } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';

function AiChatScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Ai AiChatScreen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="AI Chat" component={AiChatScreen} />
        <Stack.Screen name="Resources" component={ResourcesScreen} />
        <Stack.Screen name="DM" component={DmScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        <Stack.Screen name="Live Chat" component={LiveChatScreen} />
        <Stack.Screen name="Client Connect" component={ClientConnectScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function LiveChatScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Live Chat Screen</Text>
    </View>
  );
}

function ResourcesScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Resources Screen</Text>
    </View>
  );
}

function ClientConnectScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Client Connect Screen</Text>
    </View>
  );
}

function DmScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>DM Screen</Text>
    </View>
  );
}

function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

export default App;

工作示例：
您的问题有点不太清楚，请说明有多少个屏幕，以及您希望导航流程如何运行。同时显示您迄今为止尝试过的代码抱歉造成混淆。共有6个屏幕，我希望每个小部件在按下时导航到其相应的屏幕。ai聊天将导航到ai屏幕，以便例如，我已将整个问题添加到问题中。希望这能让事情变得更清楚没有路由器的证据-你需要实现一个路由器来实现你的目标。有几个。如果你想要一个交钥匙解决方案，请调查下一个TJS-否则，react路由器可能适合你。它相当简单，你可以使用，非常感谢你的回答but“您给组件的名称”对nea有什么影响？是关于每个Stack.Screen应该接收的道具“名称”，以使其在“navigation.navigate（“RouteName”）”上可用。与“initialRouteName=”Home相同"在与您传递到的名称匹配的组件上，初始路线名称是否必须是用户遇到的第一个屏幕？因为我在主屏幕之前有一个登录屏幕，并且它现在有问题。我已经更新了整个代码库，请转到下面给出的Expo零食链接以获取详细实施。您可以e上传的屏幕抓图中的应用程序行为哦，好的，我明白了。这是说，操作“导航”的有效载荷{“名称”：“AI聊天”}未由任何导航器处理。如果ai聊天，我会将所有实例替换为实际的屏幕名称，即AiScreen。您知道这可能是什么原因吗？关于评论中的查询，在提出任何建议之前，我可能必须先查看代码。我投了较高的票，但我的声誉很低，因此没有出现：(
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import DetailsScreen from "~/pages/Detail";
import HomeScreen from "~/pages/Home";

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator "initialRouteName="Home"  >
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />

      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

import * as React from 'react';
import { Button, View, Text, FlatList } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';

function AiChatScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Ai AiChatScreen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="AI Chat" component={AiChatScreen} />
        <Stack.Screen name="Resources" component={ResourcesScreen} />
        <Stack.Screen name="DM" component={DmScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        <Stack.Screen name="Live Chat" component={LiveChatScreen} />
        <Stack.Screen name="Client Connect" component={ClientConnectScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function LiveChatScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Live Chat Screen</Text>
    </View>
  );
}

function ResourcesScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Resources Screen</Text>
    </View>
  );
}

function ClientConnectScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Client Connect Screen</Text>
    </View>
  );
}

function DmScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>DM Screen</Text>
    </View>
  );
}

function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

export default App;