Я работал над своим приложением с двумя экранами: главный экран и экран подробностей, все работало, но код был длинным, поэтому я попытался разбить все на повторно используемые компоненты, что по какой-то причине вызвало ошибку типа navigation.navigates.
Я проверял код несколько раз, все имеет смысл для меня, здесь что-то не хватает, как исправить эту ошибку?
Я впервые использую версию 5 для навигации по реакции.
Вот пример используемого кода:
MainScreen. js
import React from "react";
import { StyleSheet, Text, View, Image, FlatList } from "react-native";
import ArticleList from "../components/ArticleList";
function MainScreen() {
return (
<View style={{ flex: 1 }}>
{/* show the data in a flatlist */}
<ArticleList />
</View>
);
}
MainScreen.navigationOptions = () => {
return {
headerShown: false,
};
};
export default MainScreen;
DetailScreen. js
import React from "react";
import { StyleSheet, Text, View, Dimensions, Image } from "react-native";
import { Feather } from "@expo/vector-icons";
import { SharedElement } from "react-native-shared-element";
import { TouchableOpacity, ScrollView } from "react-native-gesture-handler";
const DetailScreen = (props) => {
const { width, height } = Dimensions.get("window");
const { data } = props.route.params;
return (
<View style={styles.container}>
<View>
<SharedElement id={`item.${data.id}.photo`}>
<Image
resizeMode="cover"
source={{ uri: data.image }}
style={{
width: 400,
height: 300,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
}}
/>
</SharedElement>
<View
style={{
flexDirection: "row",
alignItems: "center",
position: "absolute",
bottom: 14,
left: 10,
}}
>
<SharedElement id={`item.${data.id}.profilePic`}>
<Image
resizeMode="cover"
source={{ uri: data.profilePic }}
style={{
width: 60,
height: 60,
borderRadius: 10,
marginRight: 14,
}}
/>
</SharedElement>
<View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<View>
<SharedElement id={`item.${data.id}.username`}>
<Text
style={{ color: "white", fontSize: 16, fontWeight: "bold" }}
>
{data.username}
</Text>
</SharedElement>
<SharedElement id={`item.${data.id}.readtime`}>
<Text style={{ color: "white", fontSize: 14 }}>
{data.readtime}
</Text>
</SharedElement>
</View>
<TouchableOpacity>
<Feather name="bookmark" size={30} color="white" />
</TouchableOpacity>
</View>
</View>
</View>
<ScrollView style={{ paddingHorizontal: 10, paddingTop: 14 }}>
<SharedElement
id={`item.${data.id}.text`}
style={{ width: width - 30, marginBottom: 14 }}
>
<Text style={{ fontSize: 22, fontWeight: "bold", lineHeight: 32 }}>
{data.title}
</Text>
</SharedElement>
<Text
style={{
fontSize: 14,
lineHeight: 28,
textAlign: "justify",
opacity: 0.5,
}}
>
Paragraph 1
</Text>
<Text
style={{
fontSize: 14,
lineHeight: 28,
textAlign: "justify",
opacity: 0.5,
}}
>
Paragraph 2
</Text>
<View
style={{
marginVertical: 25,
paddingBottom: 20,
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
}}
>
<TouchableOpacity
style={{ flexDirection: "row", padding: 12, alignItems: "center" }}
>
<Feather name="heart" size={16} color="orange" />
<Text style={{ marginHorizontal: 10 }}>3.4k Likes</Text>
</TouchableOpacity>
</View>
</ScrollView>
<View style={{ position: "absolute", top: 40, left: 10 }}>
<TouchableOpacity onPress={() => props.navigation.goBack()}>
<Feather name="arrow-left" size={24} color="white" />
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
export default DetailScreen;
ArticleList. js
import React from "react";
import {
View,
Text,
StyleSheet,
Image,
Dimensions,
FlatList,
} from "react-native";
import { SharedElement } from "react-native-shared-element";
import TouchableScale from "react-native-touchable-scale";
import { data } from "../data";
function ArticleList({ navigation }) {
const { width, height } = Dimensions.get("window");
return (
<View>
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
style={{ paddingHorizontal: 30 }}
data={data}
keyExtractor={(item) => item.id}
renderItem={({ item }) => {
return (
<View>
<View>
<TouchableScale
activeScale={0.9}
tension={50}
friction={7}
useNativeDriver
onPress={() =>
navigation.navigate("DetailScreen", { data: item })
}
>
{/* to show the horizental news list*/}
<SharedElement id={`item.${item.id}.photo`}>
<Image
source={{ uri: item.image }}
style={{
width: width - 100,
height: height - 350,
borderRadius: 14,
marginRight: 30,
}}
/>
</SharedElement>
{/* to show the news titles inside the pictures*/}
<SharedElement
id={`item.${item.id}.text`}
style={{
width: width - 100,
position: "absolute",
bottom: 90,
left: 10,
paddingHorizontal: 10,
}}
>
<Text style={styles.blogTitle}>{item.title}</Text>
</SharedElement>
{/* to show the pictre of the author of the news article*/}
<View
style={{
flexDirection: "row",
alignItems: "center",
position: "absolute",
bottom: 20,
left: 20,
}}
>
<SharedElement id={`item.${item.id}.profilePic`}>
<Image
resizeMode="cover"
source={{ uri: item.profilePic }}
style={styles.blogProfilePic}
/>
</SharedElement>
</View>
{/* to show the name of the author and read time of article*/}
<View>
<SharedElement id={`item.${item.id}.username`}>
<Text style={styles.blogUsername}>{item.username}</Text>
</SharedElement>
<SharedElement id={`item.${item.id}.readtime`}>
<Text style={styles.readtime}>{item.readtime}</Text>
</SharedElement>
</View>
</TouchableScale>
</View>
</View>
);
}}
/>
</View>
);
}
const styles = StyleSheet.create({
blogTitle: {
color: "white",
fontSize: 24,
fontWeight: "bold",
lineHeight: 28,
},
blogProfilePic: {
height: 50,
width: 50,
borderRadius: 10,
marginRight: 14,
},
blogUsername: {
color: "white",
fontSize: 16,
fontWeight: "bold",
},
readtime: {
fontSize: 14,
color: "white",
},
});
export default ArticleList;
Приложение. js
import React from "react";
import "react-native-gesture-handler";
import { createSharedElementStackNavigator } from "react-navigation-shared-element";
import { NavigationContainer } from "@react-navigation/native";
import MainScreen from "./app/screens/MainScreen";
import DetailScreen from "./app/screens/DetailScreen";
const Stack = createSharedElementStackNavigator();
const App = ({ navigation }) => {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="MainScreen"
screenOptions={{ headerShown: false }}
>
<Stack.Screen name="MainScreen" component={MainScreen} />
<Stack.Screen
name="DetailScreen"
component={DetailScreen}
options={(navigation) => ({
headerBackTitleVisible: false,
cardStyleInterpolator: ({ current: { progress } }) => {
return {
cardStyle: {
opacity: progress,
},
};
},
})}
sharedElements={(route) => {
const { data } = route.params;
return [
{
id: `item.${data.id}.photo`,
animation: "move",
resize: "clip",
align: "center-top",
},
{
id: `item.${data.id}.text`,
animation: "fade",
resize: "clip",
align: "left-center",
},
{
id: `item.${data.id}.profilePic`,
animation: "move",
resize: "clip",
align: "left-center",
},
{
id: `item.${data.id}.username`,
animation: "fade",
resize: "clip",
align: "left-center",
},
{
id: `item.${data.id}.readtime`,
animation: "fade",
resize: "clip",
align: "left-center",
},
];
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
Приношу свои извинения за длинные образцы кода. Я пытался сохранить все, что напрямую связано с проблемой.