android 错误：元素类型无效：需要字符串(对于内置组件)或类/函数，但得到：在主屏幕上未定义

这里是HomeScreen.js

import { StatusBar } from 'expo-status-bar';
import React, { useState,useRef,useEffect } from 'react';
import { StyleSheet,Text,View,Dimensions ,ScrollView,Image,FlatList} from 'react-native';
import { Icon } from 'react-native-elements';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'; 
import * as Location from 'expo-location';

const SCREEN_WIDTH = Dimensions.get('window').width
import { colors,parameters } from '../global/styles';
import { filterData,carsAround } from '../global/data';
import { mapStyles } from "../global/mapStyle";

const HomeScreen = () => {     

  const [latlng,setLatLng] = useState({})

  const checkPermission =async()=>{
      const hasPermission = await Location.requestForegroundPermissionsAsync();
      if(hasPermission.status === 'granted') {
          const permission = await askPermission();
          return permission
      }
      return true
  };

  const askPermission = async()=>{
      const permission = await Location.requestForegroundPermissionsAsync()
      return permission.status === 'granted';
  };

  const getLocation = async()=>{
      try{
          const {granted} =await Location.requestForegroundPermissionsAsync();
          if(!granted)return;
          const {
              coords:{latitude,longitude},
          } = await Location.getCurrentPositionAsync();
          setLatLng({latitude:latitude,longitude:longitude})
      }catch(err){

      }
  }

  const _map = useRef(1);

  useEffect(()=>{
      checkPermission();
      getLocation()
      // console.log(latlng)
  ,[]})

    return( 
      <View style = {styles.container}>
        <View style = {styles.header}>
          <View style = {styles.icon1}>
              <Icon type = 'material-community'
                    name = "menu"
                    color = {colors.white}
                    size = {40}
              />
          </View>
        </View>
        <ScrollView bounces = {false}>
          <View style = {styles.home}>
              <Text style = {styles.text1}>TransPro destress your commute</Text>
              <View style = {styles.view1}>
                  <View style = {styles.view8}>
                      <Text style = {styles.text2}>Read a book. Take a nap. Stare out the window</Text>
                      <View style = {styles.button1}>
                          <Text style = {styles.button1Text}>Ride with TransPro App</Text>
                      </View>
                  </View>
                  <View>
                      <Image style = {styles.image1} source = {require('../../assets/TransProCar.png')}/>
                  </View>
              </View>
          </View>
          {/* style = {{alignItems:'center',justifyContent:'center'}} */}
          <View>
                  <FlatList 
                      numRows = {4} 
                      horizontal = {true}
                      showsHorizontalScrollIndicator = {false}
                      data = {filterData}
                      keyExtractor = {(item) => item.id}
                      renderItem = {({item}) => (
                          <View style = {styles.card}>
                              <View style = {styles.view2}>
                                  <Image style = {styles.image2} source = {item.image}/>
                              </View>
                              <View>
                                  <Text style = {styles.title}>{item.name}</Text>
                              </View>
                          </View>
                      )}
                  />
          </View>
          <View style = {styles.view3}>
              <Text style = {styles.text3}>Where to ?</Text>
              <View style = {styles.view4}>
                  <Icon type = 'material-community'
                      name = "clock-time-four"
                      color = {colors.grey1}
                      size = {26}
                  />
                  <Text style = {{marginLeft:5}}>Now</Text>
                  <Icon type = 'material-community'
                      name = "chevron-down"
                      color = {colors.grey1}
                      size = {26}
                  />
              </View>
          </View>
          <View style = {styles.view5}>
              <View style = {styles.view6}>
                  <View style = {styles.view7}>
                      <Icon type = 'material-community'
                          name = "map-marker"
                          color = {colors.black}
                          size = {22}
                      />
                  </View>
                      <View>
                          <Text style = {{fontSize:18,color:colors.black}}>19 Saint Theresa</Text>
                          <Text style = {{color:colors.grey3}}>Barangay 179 Maricaban Pasay City</Text>
                      </View>
              </View>
              <View>
              <Icon type = 'material-community'
                          name = "chevron-right"
                          color = {colors.grey}
                          size = {26}
                      />
              </View>
          </View>
          <View style = {{...styles.view5,borderBottomWidth:0}}>
              <View style = {styles.view6}>
                  <View style = {styles.view7}>
                      <Icon type = 'material-community'
                          name = "map-marker"
                          color = {colors.black}
                          size = {22}
                      />
                  </View>
                      <View>
                          <Text style = {{fontSize:18,color:colors.black}}>1 Ilang-ilang St.Peter</Text>
                          <Text style = {{color:colors.grey3}}>Barangay 184 Maricaban Pasay City</Text>
                      </View>
              </View>
              <View>
                  <Icon type = 'material-community'
                              name = "chevron-right"
                              color = {colors.grey}
                              size = {26}
                  />
              </View>
          </View>

          <Text style = {styles.text4}> EXPLORE</Text>

          <View style = {{alignItems:"center",justifyContent:"center"}}>
              <MapView
                  ref= {_map}
                  provider = {PROVIDER_GOOGLE}
                  style = {styles.map}
                  customMapStyle = {mapStyles}
                  showsUserLocation = {true}
                  followsUserLocation = {true}
                  rotateEnabled = {true}
                  zoomEnabled = {true}
                  toolbarEnabled = {true}
              >
                {
                  carsAround.map((item,index) =>
                  <MapView.Marker coordinate = {item} key = {index.toString()}>
                    <Image
                      source = {require('../../assets/carMarker.png')}
                      style = {styles.carsAround}
                      resizeMode = "cover"
                    />
                  </MapView.Marker>
                  )
                }
              
              </MapView>

          </View>
        </ScrollView>
        <StatusBar style = "light" backgroundColor = "#2058c0" translucent = {true} />
      

      </View>
      
    );

};

export default HomeScreen;

这里是App.js

import React from 'react';
import { StyleSheet, View,  } from 'react-native'
import { colors, parameters } from './src/global/styles'
import HomeScreen from './src/screens/HomeScreen';

const App = () => {
  return(
    <View style={styles.container}>
      <HomeScreen/>
    </View>
  )
} 

export default App 

const styles = StyleSheet.create({

  container: {
    flex: 1,
    backgroundColor:colors.white,
    paddingBottom: 30
  }

})

export default App

这就是我的错误

错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
检查HomeScreen的渲染方法。

您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
由于此错误表明您没有指明是使用default还是named导入。
首先让我解释一下default和named导出的概念。

导出默认值

export default语法允许您从模块中导出单个值作为默认导出。当另一个模块导入使用export default的模块时，导入的值将是作为default导出的任何值。每个模块只能有一个默认导出。
下面是使用export default导出greeting消息的示例：

// greetings.js
const greeting = "Hello, world!";
export default greeting;

可以导入如下：

// app.js
import greeting from "./greetings.js";
console.log(greeting); // outputs "Hello, world!"

使用命名导出导出

使用named exports的export语法允许您使用命名导出从模块中导出多个值。当另一个模块导入使用named exports的模块时，导入的值将是一个带有exported values as properties的对象。
下面是一个使用export和named exports导出问候和告别消息的示例：

// greetings.js
export const greeting = "Hello, world!";
export const farewell = "Goodbye, world!";

下面是从另一个模块导入named exports的示例：

// app.js
import { greeting, farewell } from "./greetings.js";
console.log(greeting); // outputs "Hello, world!"
console.log(farewell); // outputs "Goodbye, world!"

希望这有助于理解default和named导入之间的区别。

android 错误：元素类型无效：需要字符串(对于内置组件)或类/函数，但得到：在主屏幕上未定义

3条答案

相关问题

热门标签

最新问答