index.tsx

// 路由配置
import React from 'react'
import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack'
import { headerStyle } from '../config'
import TabRouter from '../tab'

import About from '../../views/about'
import Privacy from '../../views/about/privacy'
import Features from '../../views/about/features'
import FeatureDetail from '../../views/about/feature-detail'

interface Route {
    name: string;
    options?: StackNavigationOptions;
    component: React.FC;
}

const Routes: Route[] = [
    {
        name: 'Index',
        options: { title: '首页' },
        component: TabRouter
    },
    {
        name: 'About',
        options: { title: '', headerShown: true, headerStyle: { elevation: 0, backgroundColor: '#fff' }},
        component: About
    },
    {
        name: 'Privacy',
        component: Privacy,
        options: { title: '隐私协议', headerShown: true }
    },
    {
        name: 'Features',
        component: Features,
        options: { headerShown: true, title: '功能介绍' }
    },
    {
        name: 'FeatureDetail',
        component: FeatureDetail,
        options: { headerShown: true, title: '', headerStyle: { elevation: 0, backgroundColor: '#fff' } }
    }
]

export type RouteList = {
    Index: undefined;
    About: undefined;
    Privacy: undefined;
    Features: undefined;
    FeatureDetail: { content?: string };
}

const Stack = createStackNavigator()

const Route: React.FC = () => {
    return (
        <Stack.Navigator initialRouteName="Index" screenOptions={{ ...headerStyle as StackNavigationOptions }} mode={'card'} >
            {Routes.map(item => <Stack.Screen {...item} key={item.name} />)}
        </Stack.Navigator>
    )
}

export { Route }