我创建了模板的typescript世博会应用程序与导航选项卡,我找不到主文件,这是负责主屏幕。在创建的文件夹中没有App.ts,index.ts基本上为空。在package.json中没有入口点设置,我不知道在哪里可以检查主屏幕。这是我第一次使用expo和react-native app.json:
{
"expo": {
"name": "test_mobile_app",
"slug": "test_mobile_app",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "myapp",
"userInterfaceStyle": "automatic",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#ffffff"
}
},
"web": {
"bundler": "metro",
"favicon": "./assets/images/favicon.png"
}
}
}
index.ts:
import 'expo-router/entry';
package.json:
{
"name": "test_mobile_app",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/vector-icons": "^13.0.0",
"@react-native-community/slider": "^4.4.2",
"@react-navigation/native": "6.0.8",
"expo": "~48.0.15",
"expo-font": "~11.1.1",
"expo-linking": "~4.0.1",
"expo-router": "^1.5.2",
"expo-splash-screen": "~0.18.2",
"expo-status-bar": "~1.4.4",
"expo-system-ui": "~2.2.1",
"expo-web-browser": "~12.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.71.7",
"react-native-safe-area-context": "4.5.0",
"react-native-screens": "~3.20.0",
"react-native-web": "~0.18.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/react": "~18.0.14",
"jest": "^29.2.1",
"jest-expo": "~48.0.0",
"react-test-renderer": "18.2.0",
"typescript": "^4.9.4"
},
"private": true
}
在“app”文件夹中有一个名为“_layout.tsx”的文件。我猜它是用作主屏幕文件,但我不确定。_layout.tsx:
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { SplashScreen, Stack } from 'expo-router';
import { useEffect } from 'react';
import { useColorScheme } from 'react-native';
export {
// Catch any errors thrown by the Layout component.
ErrorBoundary,
} from 'expo-router';
export const unstable_settings = {
// Ensure that reloading on `/modal` keeps a back button present.
initialRouteName: '(tabs)',
};
export default function RootLayout() {
const [loaded, error] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
...FontAwesome.font,
});
// Expo Router uses Error Boundaries to catch errors in the navigation tree.
useEffect(() => {
if (error) throw error;
}, [error]);
return (
<>
{/* Keep the splash screen open until the assets have loaded. In the future, we should just support async font loading with a native version of font-display. */}
{!loaded && <SplashScreen />}
{loaded && <RootLayoutNav />}
</>
);
}
function RootLayoutNav() {
const colorScheme = useColorScheme();
return (
<>
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ presentation: 'modal' }} />
</Stack>
</ThemeProvider>
</>
);
}
1条答案
按热度按时间epfja78i1#
我在这里找到了答案:https://levelup.gitconnected.com/routing-with-expo-router-981809eb4699#:~:text= Expo%20Router%20is%20a%20library%20that%20introduces%20file%2Dbased%20routing,them%20has%20never%20been%20easier.
似乎模板正在使用库'expo-rooter',它为您管理导航。