将参数正确传递给React Native中的函数

Question

我正在努力将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')

Answer 1

更新代码：

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>
  );
}