找不到名称为RNCSafeAreaProvider的视图配置

问题描述

我试图将React Navigation Tab导航引入我的项目，但是添加NavigationContainer时出现标题错误。似乎特别是当我添加该组件的实例时，而不是添加NavigationContainer或不同屏幕的定义时。这是真正的缺点，无论该行上有什么代码，该错误始终会在第33行列出。我可以添加其他收益，以使第33行成为空白行，并且该行仍显示在此处。碰巧的是，这属于屏幕功能之一，但是即使我添加了一堆退货来将其推高到导入中，它仍然位于第33行。

我正在使用Snack.expo.io。我注意到使用Web模拟器时不会发生该错误（甚至是模拟器吗？），但iOS和Android模拟器确实会发生此错误。我从React Navigation中复制了适用于示例代码的依赖项，但是我对它们没有信心。我只知道我可以在一个更简单的应用程序中使用选项卡导航（实际上只是他们的示例）。

package.json：

{
  "dependencies": {
    "react-native-svg": "10.0.0","react-native-paper": "^3.10.1","react-native-svg-image": "2.0.1","react-native-vector-icons": "6.6.0","react-native-screens": "^2.9.0","react-native-tab-view": "^2.14.0","react-native-reanimated": "^1.7.0","@react-navigation/stack": "^5.7.0","@react-native-community/masked-view": "^0.1.7","@react-navigation/native": "^5.7.0","react-native-safe-area-context": "^3.0.2","@react-navigation/drawer": "^5.8.5","@react-navigation/bottom-tabs": "^5.7.0","@react-navigation/material-top-tabs": "^5.2.13","@react-navigation/material-bottom-tabs": "^5.2.13"
  }
}

非常感谢您可以提供的任何帮助。

App.js：

import React,{ useState } from 'react';
import {
  StyleSheet,Text,View,Button,TouchableHighlight,TouchableOpacity,} from 'react-native';
import SVGImage from 'react-native-svg-image';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import ExerciseButton from './components/ButtonExercise';
import NavigationButton from './components/ButtonNavigation';

function HomeScreen() {
  return (
      <View style={{ backgroundColor: 'red',flex: 90 }}>{/*Usable Space Container*/}

        {/*Timer*/}
        <View style={styles.timer}>
          <TouchableOpacity style={{ backgroundColor: 'yellow' }}>
            <Text>Pause</Text>
          </TouchableOpacity>
          <Text style={styles.timer}>4:57</Text>
          <TouchableOpacity>
            <Text>Options</Text>
          </TouchableOpacity>
        </View>

        {/*@R_964_4045@ion Area*/}
        <View style={[styles.fillCenter]}>
          <View style={[styles.fillCenter,{ flexDirection: 'row' }]}>
            {/*Upper Left*/}
            <View
              style={[
                styles.fillCenter,styles.infoAreaQuad,{ backgroundColor: 'red' },]}>
              <Text style={styles.infoAreaQuad}>1</Text>
            </View>
            {/*Upper Right*/}
            <View
              style={[
                styles.fillCenter,{ backgroundColor: 'yellow' },]}>
              <Text style={styles.infoAreaQuad}>2</Text>
            </View>
          </View>

          <View style={[styles.fillCenter,{ flexDirection: 'row' }]}>
            {/*Lower Left*/}
            <View
              style={[
                styles.fillCenter,{ backgroundColor: 'green' },]}>
              <Text style={styles.infoAreaQuad}>3</Text>
            </View>
            {/*Lower Right*/}
            <View
              style={[
                styles.fillCenter,{ backgroundColor: 'blue' },]}>
              <Text style={styles.infoAreaQuad}>4</Text>
            </View>
          </View>
        </View>

        {/*Alternate Options*/}
        <View style={[styles.buttonRows,{ flexDirection: 'column' }]}>
          <TouchableOpacity style={styles.buttons}>
            <Text style={styles.centeredTextSmall}>Roll Again</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.buttons}>
            <Text style={styles.centeredTextSmall}>Pick Specific Exercise</Text>
          </TouchableOpacity>
        </View>

        {/*Exercise Buttons*/}
        <View style={styles.buttonRows}>
          <ExerciseButton ButtonText={'Squats'} />
          <ExerciseButton ButtonText={'Lunges'} />
        </View>
        <View style={styles.buttonRows}>
          <ExerciseButton ButtonText={'Pushups'} />
          <ExerciseButton ButtonText={'Chin Ups'} />
        </View>
      </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1,justifyContent: 'center',alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

function TestScreen() {
  return (
    <View style={{ flex: 1,alignItems: 'center' }}>
      <Text>Test!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Test" component={TestScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  buttonRows: {
    flex: 1,flexDirection: 'row',backgroundColor: 'grey',alignContent: 'center',},buttons: {
    backgroundColor: 'pink',alignItems: 'center',flex: 1,margin: 5,fillCenter: {
    alignItems: 'stretch',infoAreaQuad: {
    fontSize: 30,textAlign: 'center',timer: {
    flexDirection: 'row',justifyContent: 'space-evenly',backgroundColor: 'green',alignContent: 'stretch',fontSize: 40,});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）