如何在没有 2 次导出的情况下显示图像?

Question

您好，我尝试在欢迎屏幕上显示图像，但我似乎无法做到这一点。 我按照这个文档：在这里输入链接描述

我尝试只导出export default DisplayAnImage;而不是默认应用程序导出，但我无法进行 2 次导出，我知道..但我不知道它是如何真正用于导出的，也许有一种更好、更简单的方式来显示图像(并且仍然能够使其适合并对其应用设置)

我该怎么办？

import {
Button,
View,
Text,
StyleSheet,
TouchableOpacity,
LogBox,
Image,
} from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { ActivityIndicator } from "react-native";
function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<Text style={{ fontStyle: "italic", fontSize: 30 }}>
Bienvenue !{"n"}
</Text>
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate("Mon écoute")}
>
<Text style={styles.acces}>ENTRER</Text>
</TouchableOpacity>
</View>
);
}
const DisplayAnImage = () => {
return (
<View style={styles.image}>
<Image
style={styles.tinyLogo}
source={require("C:/Users/Noah Drui/Documents/course 2 js/my-project/pics/logo.jpg")}
/>
</View>
);
};
function DetailsScreen() {
return (
<View
style={{
flex: 1,
alignItems: "center",
marginBottom: 540,
justifyContent: "center",
}}
>
<Text>Quelle est votre humeur aujourd'hui?</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Accueil" component={HomeScreen} />
<Stack.Screen name="Mon écoute" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
marginBottom: 80,
alignItems: "center",
flex: 1,
justifyContent: "center",
},
acces: {
position: "relative",
marginTop: 5,
fontSize: 15,
},
button: {
alignItems: "center",
backgroundColor: "#2B92FF",
borderRadius: 15,
borderWidth: 0.3,
borderColor: "#000000",
width: 300,
height: 30,
},
tinyLogo: {
width: 50,
height: 50,
},
logo: {
width: 66,
height: 58,
},
image: {
paddingTop: 50,
},
});
export default App;

Answer 1

在这种情况下，函数DisplayAnImage是一个 React 组件。

考虑到您想在HomeScreen上显示它，请尝试实际使用页面内从应用程序显示的组件：

const DisplayAnImage = () => {
return (
<View style={styles.image}>
<Image
style={styles.tinyLogo}
source={require("C:/Users/Noah Drui/Documents/course 2 js/my-project/pics/logo.jpg")}
/>
</View>
);
};
function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<Text style={{ fontStyle: "italic", fontSize: 30 }}>
Bienvenue !{"n"}
</Text>
<DisplayAnImage /> /* place it wherever you want inside the view */
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate("Mon écoute")}
>
<Text style={styles.acces}>ENTRER</Text>
</TouchableOpacity>
</View>
);
}

保留export default App，因为它是唯一实际需要导出的。