我正在尝试导航到签名屏幕，我可以预期一个字符串（用于内置组件）

Question

错误：元素类型无效：预期一个字符串（用于内置组件）或类/函数（对于复合组件），但got：number。

检查signinscreen的渲染方法。

    import React from 'react';
import {
  SafeAreaView,
  View,
  Text,
  TextInput,
  TouchableOpacity,
} from 'react-native';

import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';

import LoginSVG from '../assets/images/login.svg';
import GoogleSVG from '../assets/images/google.svg';
import FacebookSVG from '../assets/images/facebook.svg';
import TwitterSVG from '../assets/images/twitter.svg';

import CustomButton from '../components/CustomButton';
import InputField from '../components/InputField';

const SignInScreen = ({navigation}) => {
    
  return (
    <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
    <View style={{paddingHorizontal: 25}}>
      <View style={{alignItems: 'center'}}>
        <LoginSVG
          height={300}
          width={300}
          style={{transform: [{rotate: '-5deg'}]}}
        />
      </View>

      <Text
        style={{
          fontFamily: 'Roboto-Medium',
          fontSize: 28,
          fontWeight: '500',
          color: '#333',
          marginBottom: 30,
        }}>
        Login
      </Text>

      <InputField
        label={'Email ID'}
        icon={
          <MaterialIcons
          name="alternate-email"
          size={20}
          color="#666"
          style={{marginRight: 5}}
        />
        }
        keyboardType="email-address"
      />

<InputField
        label={'Password'}
        icon={
          <Ionicons
          name="ios-lock-closed-outline"
          size={20}
          color="#666"
          style={{marginRight: 5}}
        />
        }
        inputType="password"
        fieldButtonLabel={"Forgot?"}
        fieldButtonFunction={() => {}}
      />
      
      <CustomButton label={"Login"} onPress={() => {}} />

      <Text style={{textAlign: 'center', color: '#666', marginBottom: 30}}>
        Or, login with ...
      </Text>

      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginBottom: 30,
        }}>
        <TouchableOpacity
          onPress={() => {}}
          style={{
            borderColor: '#ddd',
            borderWidth: 2,
            borderRadius: 10,
            paddingHorizontal: 30,
            paddingVertical: 10,
          }}>
          <GoogleSVG height={24} width={24} />
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {}}
          style={{
            borderColor: '#ddd',
            borderWidth: 2,
            borderRadius: 10,
            paddingHorizontal: 30,
            paddingVertical: 10,
          }}>
          <FacebookSVG height={24} width={24} />
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {}}
          style={{
            borderColor: '#ddd',
            borderWidth: 2,
            borderRadius: 10,
            paddingHorizontal: 30,
            paddingVertical: 10,
          }}>
          <TwitterSVG height={24} width={24} />
        </TouchableOpacity>
      </View>

      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'center',
          marginBottom: 30,
        }}>
        <Text>New to the app?</Text>
        <TouchableOpacity>
          <Text style={{color: '#AD40AF', fontWeight: '700'}}> Register</Text>
        </TouchableOpacity>
      </View>
    </View>
  </SafeAreaView>
  );
};

export default SignInScreen;

Answer 1

这可能是由于您正在导入的SVG。如果您使用react-native-svg，则可能需要实现反应 - sVG转换器也是如此。请参阅这个问题有关更多信息

Answer 2

似乎当这样导入SVG文件时，它们可以作为img标签的图像来源提供，而不是React组件。它们需要转换为反应组件。

请参阅添加svgs create-react-app文档。

在上面的部分中描述了添加SVG文件的一种方法。你可以
也直接导入SVG作为反应组件。您可以使用任何一个
这两种方法。在您的代码中，它看起来像这样：

 从'./logo.svg'import {reactComponent as logo};

功能应用程序（）{
  返回 （
    ＆lt; div＆gt;
      {/ *徽标是实际的反应组件 */}
      ＆lt; logo /＆gt;
    ＆lt;/div＆gt;
  ）；
}
 

对于您的代码：

import { ReactComponent as LoginSVG } from '../assets/images/login.svg';
import { ReactComponent as GoogleSVG } from '../assets/images/google.svg';
import { ReactComponent as FacebookSVG } from '../assets/images/facebook.svg';
import { ReactComponent as TwitterSVG } from '../assets/images/twitter.svg';

...

<LoginSVG
  height={300}
  width={300}
  style={{transform: [{rotate: '-5deg'}]}}
/>