[英]How can I make these components navigate to another screen in react?
I'm currently working on a react project that has a navigation page with widgets that navigate to various parts of the app.我目前正在开发一个反应项目,该项目有一个导航页面,其中包含导航到应用程序各个部分的小部件。 However, I'm not sure how to make them navigate to their appropriate screens.
但是,我不确定如何让他们导航到相应的屏幕。
Edit:编辑:
I have added more of the code in order to better illustrate what I am trying to do.我添加了更多代码以更好地说明我正在尝试做的事情。
import React from 'react';
import {View, FlatList, Text, TouchableOpacity, Dimensions} from 'react-native';
import LinearGradientScreen from './linearGradientScreen';
import Feather from 'react-native-vector-icons/Feather';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Entypo from 'react-native-vector-icons/Entypo';
const CellComponent = (props) => {
return (
<TouchableOpacity
onPress={() => props.navigation.navigate('tabNavigator')}
style={{
backgroundColor: props.item.color,
height: (13 * Dimensions.get('window').height) / 100,
width: 132,
borderRadius: 5,
shadowColor: 'rgba(52,2,2,1)',
shadowOffset: {
width: 3,
height: 3,
},
elevation: 5,
shadowOpacity: 1,
shadowRadius: 0,
margin: 20,
alignItems: 'center',
justifyContent: 'center',
}}>
{props.item.family === 'Feather' ? (
<Feather
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
{props.item.family === 'MaterialCommunityIcons1' ? (
<MaterialCommunityIcons
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
{props.item.family === 'Entypo' ? (
<Entypo
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
{props.item.family === 'MaterialCommunityIcons2' ? (
<MaterialCommunityIcons
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
{props.item.family === 'MaterialCommunityIcons' ? (
<MaterialCommunityIcons
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
{props.item.family === 'FontAwesome' ? (
<FontAwesome
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
<Text
style={{
color: 'white',
fontSize: 18 * Dimensions.get('window').fontScale,
}}>
{props.item.name}
</Text>
</TouchableOpacity>
);
};
const HomeScreen = (props) => {
return (
<LinearGradientScreen>
<View style={{alignItems: 'center', justifyContent: 'center'}}>
<Text
style={{
marginTop: '20%',
fontSize: 50 * Dimensions.get('window').fontScale,
color: 'white',
fontWeight: 'bold',
}}>
Home
</Text>
<Text
style={{
fontSize: 25 * Dimensions.get('window').fontScale,
color: 'white',
fontWeight: '400',
marginBottom: '10%',
}}>
Select a service
</Text>
<FlatList
numColumns={2}
data={HomeScreenData}
renderItem={({item}) => {
return <CellComponent {...props} item={item} />;
}}
/>
</View>
</LinearGradientScreen>
);
};
const HomeScreenData = [
{
id: 1,
name: 'AI Chat',
icon: 'cpu',
family: 'Feather',
color: 'rgba(247,52,122,1)',
},
{
id: 2,
name: 'Live Chat',
icon: 'wechat',
family: 'FontAwesome',
color: 'rgba(16,165,245,1)',
},
{
id: 3,
name: 'Resources',
icon: 'file-document-outline',
family: 'MaterialCommunityIcons',
color: 'rgba(74,74,74,1)',
},
{
id: 1,
name: 'Client Connect',
icon: 'gesture-swipe-horizontal',
family: 'MaterialCommunityIcons1',
color: 'rgba(237,41,57,1)',
},
{
id: 1,
name: 'DM',
icon: 'message',
family: 'Entypo',
color: 'rgba(74,144,226,1)',
},
{
id: 1,
name: 'Profile',
icon: 'tooltip-account',
family: 'MaterialCommunityIcons2',
color: 'rgba(144,19,254,1)',
},
];
export default HomeScreen;
Is there something like navigate: 'AiScreen.js',
that I can use to make it navigate to the correct place?是否有类似 navigation:
'AiScreen.js',
东西,我可以用它来让它导航到正确的位置?
Every Stack.Screen should receive the prop "name" to make it available on "navigation.navigate("RouteName")".每个 Stack.Screen 都应该接收到 prop "name" 以使其在 "navigation.navigate("RouteName")" 上可用。
from the docs https://reactnavigation.org/docs/navigating/来自文档https://reactnavigation.org/docs/navigating/
import * as React from 'react';
import { Button, View, Text } from 'react-native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
export default HomeScreen;
If you named your routes like in the docs如果您像在文档中那样命名您的路线
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;
Same way you have "initialRouteName="Home" on <Stack.Navigator/> component that matches with the name you passed to <Stack.Screen/> "name" props与您传递给 <Stack.Screen/> “name” props 的名称相匹配的 <Stack.Navigator/> 组件上的“initialRouteName="Home” 方式相同
Output: Output:
Here is an example, here I have Implemented How you can navigate to the Ai Chat Screen, Just like that you can create other screens, define them in Stack Navigator and navigate within them.这是一个示例,这里我已经实现了如何导航到 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;
Modified CellComponent, it takes props.item.name
for routing.修改了 CellComponent,它需要
props.item.name
进行路由。
So, you don't have to worry about typing the route name for each screen.因此,您不必担心为每个屏幕输入路线名称。
const CellComponent = (props) => {
return (
<TouchableOpacity
onPress={() => props.navigation.navigate(props.item.name)}
style={{
backgroundColor: props.item.color,
height: (13 * Dimensions.get('window').height) / 100,
width: 132,
borderRadius: 5,
shadowColor: 'rgba(52,2,2,1)',
shadowOffset: {
width: 3,
height: 3,
},
elevation: 5,
shadowOpacity: 1,
shadowRadius: 0,
margin: 20,
alignItems: 'center',
justifyContent: 'center',
}}>
{props.item.family === 'Feather' ? (
<Feather
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
{props.item.family === 'MaterialCommunityIcons1' ? (
<MaterialCommunityIcons
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
{props.item.family === 'Entypo' ? (
<Entypo
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
{props.item.family === 'MaterialCommunityIcons2' ? (
<MaterialCommunityIcons
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
{props.item.family === 'MaterialCommunityIcons' ? (
<MaterialCommunityIcons
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
{props.item.family === 'FontAwesome' ? (
<FontAwesome
type={props.item.type}
color={'rgba(255,255,255,1)'}
name={props.item.icon}
size={30}
/>
) : null}
<Text
style={{
color: 'white',
fontSize: 18 * Dimensions.get('window').fontScale,
}}>
{props.item.name}
</Text>
</TouchableOpacity>
);
};
Working Example: Expo Snack工作示例: Expo 小吃
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.