taro/src/pages/rn/RNMain.tsx

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

import Clock from '../clock/Clock.weapp'
import Metric from '../metric/Metric'
import Activity from '../activity/Activity'
import Profile from '../account/Profile'
import ChooseAuth from '@/pages/account/ChooseAuth'
import Auth from '@/pages/account/Auth'
import { View } from '@tarojs/components';

// 创建底部 Tab 导航器
const Tab = createBottomTabNavigator();

// 创建堆栈导航器
const Stack = createStackNavigator();

/*
// 创建 A 页面的堆栈导航器
const AStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="A" component={AScreen} />
      <Stack.Screen name="C" component={CScreen} options={{ tabBarVisible: true }} />
    </Stack.Navigator>
  );
};

// 创建 B 页面的堆栈导航器
const BStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="B" component={BScreen} />
      <Stack.Screen name="D" component={DScreen} options={{ tabBarVisible: false }} />
    </Stack.Navigator>
  );
};

const App: React.FC = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="A" component={AStack} />
        <Tab.Screen name="B" component={BStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};
*/

export default function RNMain() {
  const ClockPage = ()=> <Clock />
  const MetricPage = ()=> <Metric />
  const ActivityPage = ()=> <Activity />
  const ProfilePage = ()=> <Profile />

  function tabNavigator() {
    return (
      <Tab.Navigator screenOptions={({ route }) => ({
        headerStyle: {
          backgroundColor: 'black',
          borderBottomWidth: 0, // 隐藏导航条底部边框
        },
        headerTintColor: 'white',
        tabBarStyle: { backgroundColor: 'black' }, // tabbar的背景色
        tabBarActiveTintColor: 'white', // 活动标签的颜色
        tabBarInactiveTintColor: 'gray', // 非活动标签的颜色
      })}>
        <Tab.Screen name="Clock" component={ClockPage} />
        <Tab.Screen name="Metric" component={MetricPage} />
        <Tab.Screen name="Activity" component={ActivityPage} />
        <Tab.Screen name="Profile" component={ProfilePage} />
      </Tab.Navigator>
    )
  }
  return (
    <NavigationContainer theme={{
      dark: false,
      colors: {
        text: 'white',
        primary: 'white',
        card: 'white',
        border: 'transparent',
        background: 'black',
        notification: 'red'
      }
    }}>
      <Stack.Navigator screenOptions={({ route }) => ({
        headerStyle: {
          backgroundColor: 'black',
          borderBottomWidth: 0, // 隐藏导航条底部边框
          borderBottomColor:'red'
        },
        headerTintColor: 'white',
        tabBarStyle: { backgroundColor: 'black' }, // tabbar的背景色
        tabBarActiveTintColor: 'white', // 活动标签的颜色
        tabBarInactiveTintColor: 'gray', // 非活动标签的颜色
      })}>
        <Stack.Screen name='Main' component={tabNavigator} options={{ headerShown: false }}/>
        <Stack.Screen name='ChooseAuth' component={ChooseAuth} />
        <Stack.Screen name='Auth' component={Auth} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}