React Native 页面路由Route配置
1.自定义 route.jsx
// 页面路径
import Info from '../pages/views/info';
import Info2 from '../pages/views/info2';
export const RouteList = [
{
path: '/info',name: 'info',component: Info
},{
path: '/info2',name: 'info2',component: Info2
}
];2.配置App.tsx
import { RouteList } from './route';
import { NavigationContainer } from '@react-navigation/native';
import { RouteList } from './route.jsx'; //导入文件
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
// npm get react-navigation/native
function App() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="tabTabs" component={TabNavigator} />
{
RouteList.map((v: any) => (
<Stack.Screen key={v.path} name={v.name} component={v.component} />
))
}
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;3.使用路由跳转
<TouchableOpacity onPress={() => navigation.navigate('info')}>
<Text>跳转详情信息</Text>
</TouchableOpacity>