我有我的 react native 代码,我试图向它添加导航,但它显示为空白,如果我try 通过控制台记录堆栈中的任何内容,但控制台日志(log)显示但屏幕本身不显示,这是我的屏幕:
import React, { useEffect, useState, useRef } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import "react-native-gesture-handler";
import BottomTabNavigator from "./BottomTabNavigator";
import ContinueScreen from "../screens/ContinueScreen";
const Stack = createNativeStackNavigator();
function MainStack() {
console.log("jk");
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="ContinueScreen">
<Stack.Screen name="ContinueScreen" component={ContinueScreen} />
<Stack.Screen
name="BottomTabNavigator"
component={BottomTabNavigator}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default MainStack;
我的Package.json:
{
"name": "app",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@react-native-async-storage/async-storage": "1.17.11",
"@react-navigation/bottom-tabs": "^6.5.2",
"@react-navigation/native": "^6.1.1",
"@react-navigation/native-stack": "^6.9.7",
"expo": "~48.0.18",
"expo-font": "^11.1.1",
"expo-status-bar": "~1.4.4",
"formik": "^2.4.1",
"nativewind": "^2.0.11",
"react": "18.2.0",
"react-native": "0.71.8",
"react-native-gesture-handler": "~2.8.0",
"react-native-safe-area-context": "4.4.1",
"react-native-screens": "~3.18.0",
"tailwind-react-native-classnames": "^1.5.1",
"yup": "^1.2.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/react": "~18.0.14",
"@types/react-native": "^0.72.2",
"tailwindcss": "^3.3.2",
"typescript": "^4.9.4"
},
"private": true
}
我怎么才能让屏幕显示出来?如果我还在app.tsx中添加屏幕ContinueScreen
,它会显示没有任何问题,但如果我将其添加到MainSTack中,它不会显示.
我的app.tsx:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
// import tw from 'tailwind-react-native-classnames';
import OnboradingScreen from './app/screens/OnboradingScreen';
import ContinueScreen from './app/screens/ContinueScreen';
import BottomTabNavigator from './app/stacks/BottomTabNavigator';
import MainStack from './app/stacks/MainStack';
export default function App() {
return (
<View>
{/* <OnboradingScreen /> */}
<MainStack/>
</View>
);
}
const styles = StyleSheet.create({
// container: {
// flex: 1,
// backgroundColor: '#fff',
// alignItems: 'center',
// justifyContent: 'center',
// },
});