我正在努力将const navigation = useNavigation();
正确传递给我的外部函数。
目前,我有这个“主要”功能:
export default function MyDrawer({ route }) {
const nav = useNavigation(); // Use hook here as u will now dont get any error. now pass it as param to above if needed
return (
<NavigationContainer independent={true}>
<Drawer.Navigator
initialRouteName="QR"
drawerContent={props => CustomDrawerContent(props, route)}
>
<Drawer.Screen
name="QR"
component={QR}
initialParams={{ user: route.params.user }}
/>
<Drawer.Screen name="Odabir" component={Odabir} />
</Drawer.Navigator>
</NavigationContainer>
);
}
处理抽屉逻辑和路由。我曾经在此函数中声明const Drawer = createDrawerNavigator()
:
function CustomDrawerContent({ props, navigation }, route, ) {
// *** Don't use below hook here its wrong to use hooks outside main function if need pass to it as param from main function
// const navigation = useNavigation();
return (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 150,
alignItems: "center",
justifyContent: "center",
marginTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight
}}
>
<Image
source={{uri:route.params.user.photoUrl}}
style={{ height: 110, width: 110, borderRadius: 60 }}
/>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.name} {route.params.user.lastname}
</Text>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.email}
</Text>
</View>
<View style={{ height: 30, alignItems: "center", marginBottom: 10 }}>
<Text style={styles.naslov}></Text>
</View>
<Divider />
<ScrollView style={{ marginLeft: 5 }}>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("QR")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> QR</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
}
处理onPress路由到不同的组件。由于挂钩的工作方式以及从Google API捕获数据的过程,我不得不移动const nav = useNavigation();
。
我的问题是如何正确地将参数传递回MyDrawer
函数,以便导航再次起作用?我目前收到的错误是TypeError: undefined is not an object(evaluating 'props.navigation')
答案 0 :(得分:0)
更新代码:
export default function MyDrawer({ route }) {
const nav = useNavigation(); // Use hook here as u will now dont get any error. now pass it as param to above if needed
return (
<NavigationContainer independent={true}>
<Drawer.Navigator
initialRouteName="QR"
drawerContent={props => <CustomDrawerContent {...props} {...{route}} />}
>
<Drawer.Screen
name="QR"
component={QR}
initialParams={{ user: route.params.user }}
/>
<Drawer.Screen name="Odabir" component={Odabir} />
</Drawer.Navigator>
</NavigationContainer>
);
}
抽屉内容
const CustomDrawerContent = ({navigation, route}) => {
// *** Don't use below hook here its wrong to use hooks outside main function if need pass to it as param from main function
// const navigation = useNavigation();
return (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 150,
alignItems: "center",
justifyContent: "center",
marginTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight
}}
>
<Image
source={{uri:route.params.user.photoUrl}}
style={{ height: 110, width: 110, borderRadius: 60 }}
/>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.name} {route.params.user.lastname}
</Text>
</View>
<View style={{ height: 30, alignItems: "center" }}>
<Text style={styles.naslov}>
{route.params.user.email}
</Text>
</View>
<View style={{ height: 30, alignItems: "center", marginBottom: 10 }}>
<Text style={styles.naslov}></Text>
</View>
<Divider />
<ScrollView style={{ marginLeft: 5 }}>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("QR")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> QR</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
<TouchableOpacity
style={{ marginTop: 20, marginLeft: 20 }}
onPress={() => props.navigation.navigate("Odabir")}
>
<View style={{ padding: 10 }}>
<Ionicons name="ios-qr-scanner" size={20} styles={{}}>
<Text style={styles.naslov}> Odabir</Text>
</Ionicons>
</View>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
}