Question

我一直在对自己制作的应用程序进行重新设计，开始使用类和更多面向对象的样式，并为页面使用单独的文件，而不仅仅是在主文件中的函数中添加所有内容。

这是App.js

import 'react-native-gesture-handler';
import React , {Component} from 'react';
import {Button, Text, View, SafeAreaView} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import {homeScreen} from './Screens/Home';
import {addAsset} from './Screens/AddAsset';

const Tab = createMaterialBottomTabNavigator();

class App extends Component {

  render() {
    return(
      <View>

      <Text>Yeet</Text>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={homeScreen} />
          <Tab.Screen name="Add" component={addAsset} />
        </Tab.Navigator> 
      </NavigationContainer>
      </View>
    );
  }
}

export default App;

这是我要显示的示例屏幕

import 'react-native-gesture-handler';
import React , {Component} from 'react';
import {Button, Text, View, SafeAreaView} from 'react-native';






class homeScreen extends Component {
    render() {
      return(
        <View>
          <Text>Main Page</Text>
        </View>
      );
    }
  }

  export default homeScreen;

我总是收到一条错误消息，说它找不到主屏幕的组件或获取组件道具。

有人可以解释我在做什么错吗？还是有点新。

Answer 1

您已经完成了默认导出，因此您应该像下面这样进行导入，这会导致未定义的内容传递到选项卡导航并导致错误

import homeScreen from './Screens/Home';

除去花括号即可解决此问题。

另一个建议是使用HomeScreen之类的大写字母作为起始组件名称

底部标签导航器出现组件错误

1 个答案: