在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;
```
1条答案
按热度按时间kjthegm61#
您使用了
react-native-SVG
作为图像,因此请将其更新为从react-native
导入。