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

我正在努力通过

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

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路由。我不得不移动
const nav=useNavigation（）MyDrawer
函数，以便导航再次工作？我当前遇到的错误是
TypeError:undefined不是对象（评估'props.navigation'）
更新代码：

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

导出默认函数MyDrawer（{route}）{
const nav=useNavigation（）；//在此处使用钩子，因为现在不会得到任何错误。如果需要，现在将其作为参数传递给上面的
返回(
}
>
);
}

抽屉内容

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

const CustomDrawerContent=（{navigation，route}）=>{
//***此处不要使用下面的钩子，如果需要从主函数作为参数传递给它，则在主函数外部使用钩子是错误的
//const navigation=useNavigation（）；
返回(
{route.params.user.name}{route.params.user.lastname}
{route.params.user.email}
props.navigation.navigate（“QR”）}
>
QR
props.navigation.navigate（“Odabir”）}
>
奥达比尔
props.navigation.navigate（“Odabir”）}
>
奥达比尔
);
}
在抽屉内容中也使用钩子，而不是从道具获取导航。使用const navigation=useNavigation（）&&navigation.navigate（'Screen'，params）您想在下面详细说明或发布编辑过的代码吗？如果我尝试调用hook
const navigation=useNavigation（）在抽屉内容中，我收到一个错误，说我正在违反React Hookschage DroperContent={props=>CustomDroperContent（props，route）}to DroperContent={props=>在抽屉中使用内容函数DroperContent（{navigation}）=>{}用
{props}替换
{props}
并在
const CustomDrawerContent=（{navigation，route}）中传递
道具
，效果良好