我有我的 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',
  // },
});

推荐答案

这看起来像是一个风格问题.是否可以将FLEX:1添加到视图零部件?

<View style={{ flex: 1 }}>
 <MainStack/>
</View>

React-native相关问答推荐

如何在renderItem中显示每个项目的索引号,保持分页的前一个下一个按钮

FBSDK 和 LinkingManager 的 AppDelegate.m

Javascript setTimeout 立即在 React Native 中运行

react-native 签名 [AppName]Tests 需要开发团队 ios

React-native -run-ios 错误无法构建 iOS 元素.我们运行了xcodebuild命令,但它以错误代码 65 退出

变量 window在react-native 中代表什么?

请求无法完成,因为您已超出配额

React-Native 应用程序的 Jest 测试 Animated.View

React Native 无法读取 index.android.delta

ld:找不到-lFirebaseCore clang的库: error: linker command failed with exit code 1 (use -v to see invocation)

FlatList contentContainerStyle -> justifyContent: 'center' 导致滚动问题

如何删除不需要的expo 模块

props验证中缺少 React Navigation 'navigation'

自定义原生基础的选项卡

react-native Http 拦截器

SyntaxError:Strict mode does not allow function declarations in a lexically nested statement on a newly created app

Unexpected token on "export default const"

如何将时刻日期转换为字符串并删除时刻对象

如何在 React Native 中从底部滑入和滑出

react-native如何导入元素根目录?