Ionic 如何用react导入.tsx中的图像?

mbyulnm0  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(163)

在typescript中导入图像时遇到问题。以前我使用**img src=""* I,但它显示
组件img的视图配置getter回调必须是一个函数(已接收undefined)。请确保组件名称以大写字母开头。
但是导入成功了,它可以找到我的文件路径,然后我使用react-native模块中的Image组件,代码片段是

<Image
   style={{
   width: 161,
   height: 111,
   alignSelf: "center",
   marginBottom: 30,
 }}
 />

但资料里有个错误
类型'{源:任意;样式:{宽度:数字;高度:数量; alignSelf:字符串;边距底部:“number; }; }"不能赋给类型”IntrinsicAttributes & IntrinsicClassAttributes〈Component〈ImageProps,any,any〉〉& Readonly“。类型”IntrinsicAttributes & IntrinsicClassAttributes〈Component〈ImageProps,any,any〉〉& Readonly“上不存在属性”source“。
我该怎么解决这个问题呢?先谢了。
下面是完整的代码

import { View, TouchableOpacity, Text , ScrollView } from "react-native";
import React, { useState } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { svg } from "../svg";
import { theme } from "../constants";
import { components } from "../components";
import { Image, SvgUri } from "react-native-svg";
import  image from "../assets/logo2.png"

const Unregistered: React.FC = ({ navigation }: any) => {
    const [rememberMe, setRememberMe] = useState(false);

    const renderHeader = () => {
        return <components.Header goBack={true} />;
    };
    const renderContent = () => {
        return (
            <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
            
                <View >
                    <Text
                        style={{
                            textAlign: "center",
                            ...theme.FONTS.H2,
                            color: theme.COLORS.mainDark,
                            marginBottom: 20,
                        }}
                    >
                        Welcome to{"\n"}FNS Pay
                    </Text>
                    <img src="image"></img>
                    <Image
                        source={require("../assets/logo2.png")}
                        style={{
                            width: 161,
                            height: 111,
                            alignSelf: "center",
                            marginBottom: 30,
                        }}
                    />
                    
                    <View
                        style={{
                            flexDirection: "column",
                            alignItems: "center",
                            justifyContent: "space-between",
                            marginStart: 20,
                            marginEnd: 20

                        }}
                    >
                    <components.Button
                        title="Sign Up"
                        onPress={() => navigation.navigate("TabNavigator")}
                        containerStyle={{ marginTop: 400}}
                    />                   
                    <components.Button
                        title="Register Device"
                        onPress={() => navigation.navigate("OnBoarding")}
                        containerStyle={{ marginTop: 20}}
                    />
                    </View>

                </View>
            </ScrollView>
        );
    };

    return (
        <SafeAreaView
            style={{ flex: 1, backgroundColor: theme.COLORS.bgColor }}
        >
            {renderHeader()}
            {renderContent()}
        </SafeAreaView>
    );
};

export default Unregistered;
    ```
kjthegm6

kjthegm61#

您使用了react-native-SVG作为图像,因此请将其更新为从react-native导入。

相关问题