【发布时间】：2020-11-29 21:26:44
【问题描述】：
我目前正在开发一个 react 项目，该项目有一个导航页面，其中包含导航到应用程序各个部分的小部件。但是，我不确定如何让他们导航到相应的屏幕。
编辑：
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;
是否有类似导航：'AiScreen.js', 的内容，我可以使用它使其导航到正确的位置？
【问题讨论】：
-
您的问题不是很清楚，请说明有多少屏幕以及您希望导航流程如何进行。还显示您到目前为止尝试过的代码
-
抱歉给您带来了困惑。有 6 个屏幕，我希望每个小部件在按下时导航到相应的屏幕。例如，人工智能聊天将导航到人工智能屏幕
-
我已经添加了整个问题。希望这能让事情更清楚
-
没有路由器的证据 - 你需要实现一个路由器来实现你的目标。有几种。如果您想要一个交钥匙解决方案，请调查 nextjs - 否则 react-router 可能会为您工作。
-
比较简单，可以使用reactnavigation.org/docs/navigating
标签： javascript android ios reactjs react-native